CSS line-height概念与举例
朋友们可以关注下我的公众号，获得最及时的更新：
或者关注我的知乎账号 ： https://www.zhihu.com/people/zhangyachen
定义
两行文字基线之间的距离。
基线的大体位置
基线的位置可以看成 x 字母下边缘的位置。
不同字体的基线位置会有微小的差别。
文本中的几条线：
行高示意图：
一行文本的行高为：上间距 + 文本的高度 + 下间距，并且上间距是等于下间距的。
我们还可以基本上这样认为：行高是两行文字基线之间的距离，也是两行文字顶线之间的距离，两行文字中线之间的距离。
行内框盒子模型
- 内容区域 content area
- 内联盒子 inline boxes
- 行框盒子 line boxes
- 包含盒子 containing box
内容区域 content area
围绕盒子看不见的区域，大小与 font-size 相关，高度就是上面图示中的文本高度。我们可以理解成选中文字之后的变色区域。
内容区域只与字号与字体有关，与行高无关！
在宋体字体下，内容区域高度 = 字体大小。在其他字体下，内容区域高度 ≈ 字体大小
内联盒子 inline boxes
内联盒子不会让内容成块显示，而是显示成一行，如果外部包含 inline 标签的话 (span,a,em 等)，则属于内联盒子。如果只有文字的话，就是 "匿名内联盒子"。
行框盒子 line boxes
每一行就是一个行框盒子，每个行框盒子都是由一个个内联盒子组成的。
包含盒子 containing box
由一行一行的行框盒子组成的。
总之：包含盒子包括行框盒子包括内联盒子
line-height 的属性值
- 对于块级元素，line-height 指定了元素内部 line-boxes 的最小高度
- 对于非替代行内元素，line-height 用于计算 line-box 的高度
- 对于替代行内元素，例如 input、button，line-height 没有影响
normal
取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为 1.2，这取决于元素的 font-family。
line-height: normal;
number
所用的值是无单位数值乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下，使用这种方法设置 line-height 是首选方法，在继承情况下不会有异常的值。
line-height: 3.5;
length
指定 用于计算 line box 的高度。
line-height: 3em;
percentage
与元素自身的字体大小有关。计算出的值是给定的百分比值乘以元素计算出的字体大小。
line-height: 34%;
inherit
IE8+
input 框等元素默认行高是 normal，可以使用
line-height: inherit ;
让元素可控性更强。
line-height:1.5、line-height:150%、line-height:1.5em 的区别
em 的效果跟 % 是一样的。
line-height:1.5
所有可继承元素根据 font-size 重新计算行高。
<div id="father">
<div id="son">
我的font-size为60px
</div>
</div>
#father{
font-size:12px;
line-height:1.5;
width:300px;
}
#son{
font-size:60px;
color:white;
}
此时，#son 元素的 line-height 为 60*1.5=75px；
line-height:150%/line-height:1.5em
当前元素根据 font-size 计算行高，将计算出来的值继承给下面的元素。
<div id="father">
<div id="son">
我的font-size为60px
</div>
</div>
#father{
font-size:12px;
line-height:150%;
width:300px;
}
#son{
font-size:60px;
color:white;
}
此时 #son 元素的 line-height 为 12px*150%=18px。因为#son 元素的文本框高度是 60px，所以#son 元素的半行间距约等于 (18-60)/2 = -21px；所以 #son 元素内的两行字重合在一起了。
推荐使用无单位数值给 line-height 赋值
line-height 与图片的表现
<div>
<img src="muke/resource/photo/1_0.jpeg">
</div>
div{
background-color: #abcdef;
}
img{
width: 300px;
height: 300px;
}
注意到图片下方有很窄的一条空隙，使得图片的高度不能填充父容器的高度。
现在在图片之后加入一些文字的话：
<div>
<img src="muke/resource/photo/1_0.jpeg">
<span>xxxx我是图片之后的文字</span><br>
</div>
div{
background-color: #abcdef;
}
img{
width: 300px;
height: 300px;
}
span{
background-color: white;
}
注意到图片底部是与字母 x 的下边缘 (基线) 对齐的，所以我们可以联想到，图片为了与之后文字的基线对齐(图片之后没有文字可以想象成有文字)，所以图片下面才有了一小段空隙。为什么图片要与文字的基线对齐呢？因为 vertical-align 的属性默认是 baseline。以后有时间再细细研究一下 vertical-align 这个属性。
如何消除图片下面的空隙
- 图片底线对齐
img{
width: 300px;
height: 300px;
vertical-align:bottom;
}
这样的话图片就与文字的底线对齐，也就消除了空隙。
- 图片块状化
img{
width: 300px;
height: 300px;
display:block;
}
因为 vertical-align 这个属性只对行内元素有效，所以将图片变为块状元素可以使得 vertical-align:baseline 失效。
- 行高足够小，使得基线上移
div{
background-color: #abcdef;
line-height:0;
}
这里有个疑问，此时基线按理说应该比图片底端还要向上，为什么图片没有与基线对齐？
单行文本垂直居中原理
<div>
单行文本垂直居中
</div>
div{
background-color: #abcdef;
height: 300px;
line-height: 300px;
}
文字居中，即文字内容区域的一半 + 内容区域顶部到父容器上边缘 = 父容器高度的一半。而内容区域顶部到父容器上边缘 = 上间距 = 下间距，所以文字内容区域 + 上间距 + 下间距 = 父容器高度。因为文字内容区域 + 上间距 + 下间距 = line-height，所以当 line-height = height 时，单行文本居中。也就是文本的中线与父容器的中间线近似重合。
多行文本居中
<div id="father">
<div id="son">多行文本垂直居中<br>多行文本垂直居中<br>多行文本垂直居中<br></div>
</div>
#father{
line-height:300px;
background-color: #abcdef;
height: 300px;
}
#son{
line-height: normal;
display: inline-block;
vertical-align: middle;
border: 1px red solid;
}
多行文本居中，我们可以将这多行文本看成一个整体，即一行，问题转换为上面的单行文本居中，所以我们让父元素的 height = line-height。为了覆盖掉继承过来的 line-height，我们在 #son 元素中使用 line-height:normal。看下效果：
貌似偏上了一些，为了让整体文本的中线与父容器的中间线近似重合。我们可以添加 vertical-align: middle。让整体放置于父元素的中部，效果就是本节开始的那张图片的效果。
参考资料：http://www.imooc.com/learn/403
http://www.imooc.com/article/7767
https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height
朋友们可以关注下我的公众号，获得最及时的更新：