line-height与vertical-align | Rio的个人博客

总览

深入了解line-height、vertical-align笔记总结

# line-height

行距 = line-height - font-size

line-height 是一行字的高度，包括了字体的实际高度以及行间距（字间距）。带单位的方式是直接指定具体的行高值，纯数字和百分比的方式会将计算后的行高值传递给后代元素

撑开div高度的是line-height不是文字内容。

.test1 {
	font-size: 0px;
	line-height: 20px;
	border: 1px solid red;
	background-color: #eeeeee;
}
.test2 {
	margin-top: 50px;
	font-size: 20px;
	line-height: 0px;
	border: 1px solid red;
	background-color: #eeeeee;
}

  <div class="test1">测试1</div>
  <div class="test2">测试2</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# line-height如何继承

写具体数值，如30px ，继承该值
写比例，如2/1.5，继承该比例
写百分比，如200% ，继承计算出来的值

<style>
    body{
      font-size: 20px;
      /* line-height: 50px;  p标签的行高为  50px */
      /* line-height: 2;  p标签的行高为  2*16=32px */
      /* line-height: 200%;  p标签的行高为  2*20=40px */
    }
    p{ 
      font-size: 16px;
    }
  </style>
</head>

<body>
  <p>hello world</p>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# vertical-align

属性vertical-align影响一个内联级元素垂直方向上的布局。具体适用于display值为inline，inline-block

行盒中行内级元素的对齐方式默认是基线对齐

.box {
     background-color: pink;
}

.small {
     display: inline-block;
     width: 100px;
     height: 150px;
     background-color: red;
}

img {
     width: 100px;
}

<div class="box">
行盒一定要包裹进所有内容<span class="small"></span><img src="../image/cat.png">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如何确定基线baseline

inline，内联元素的baseline，是里面文本（即使没有字母x，可以想象文本中有一个字母x）字母x的下边缘线
inline-block，内联块元素baseline位置的确定规则又分为以下三种：

（1） inline-block元素盒子里，没有内容(流内内容)，是一个空的盒子时，baseline位置就是该盒子margin-bottom的边界（没有margin-bottom值，就是盒子的边界值）。

（2）inline-block元素盒子里，有内容元素，并且overflow属性值为visible时(默认值)，那么该盒子的baseline位置就是里面最后一个内容元素的baseline。如下图中间div

（3）inline-block元素盒子里，**有内容元素，并且overflow属性值为非visible时 (比如overflow:hidden)，**那么该盒子的baseline位置就是该盒子margin-bottom的边界。如下图右侧div

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的

{
  line-height: 30px;
  vertical-align: -10%;
}
等同于
{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}

1
2
3
4
5
6
7
8
9

如何消除基线对齐造成的图片空隙

让vertical-align失效 display: block;...
使用其他vertical-align值 vertical-align: bottom;...

vertical-align的middle属性值

middle值就是父盒子的baseline加上父盒子的x-height的一半位置对齐设置font-size = 0 可以有效处理垂直居中问题

# 参考

css行高line-height的一些深入理解及应用 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com) (opens new window)

想要清晰的明白（二）CSS 盒模型Block box与Line box - moonx - SegmentFault 思否 (opens new window)

技术蛋老师 (opens new window)