line-height 与 vetical-align

[Reaper622]

Line-height 和 vertical-align

line-height定义的是两基线(baseline)的距离，vertical-align的默认值就是基线，基线的定义是字母x的下边缘。

css有一个 x-height的概念，指的是小写字母x的高度,vertical-align:middle对其的就是基线往上1/2 x-height的高度。

line-height

• normal: 根据浏览器和font-family不同而不同，一般约为1.2。
• 数值和百分比: 计算方法是乘以font-szie。
• 长度值：带单位的值。
• 可继承：line-height是数值的元素的子元素继承的就是这个数值，百分比/长度值继承的都是计算后得出的带单位的值（px）

主要作用

决定了行框盒子的最小高度。注意是行框盒子的最小高度，而不是块级元素的实际高度。

行距使文字居中的原因是行距具有上下等分的机制，行距自身为line-height - font-size，上下行距各占一半。

无论内联元素的line-height如何设置们最终副元素的高度值都是较大的line-height

Vertical-align

• 线类： 如baseline（默认值） top middle bottom（baseline使元素的基线与父元素的基线对齐，middle使元素的中部与父元素的基线往上x-height的一半对齐。top bottom使元素及其后代元素的底部与整行或整块的底部对齐。）
• 文本类：text-top text-bottom
• 上标下标： sub super（使元素的基线与父元素的下标基线对齐。）
• 数值： 20px 2em （默认值baseline相当于数值的 0 。使元素的基线对齐到父元素的基线之上的给定长度，数值正值是基线往上偏移，负值是往下偏移，借此可以实现元素垂直方向精确对齐。
• 百分比： 20% （使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比）

vertical-align 只对内联元素起作用，所以如果元素设置了float: left或者position: absolute，则其vertical-align属性不能生效，因为此时元素的display计算值为block了。

line-height 和 vertical-align 会造成的问题：

• 幽灵节点导致基线上移使元素增高的问题。
• display： inline-block 基线不同

如何解决？

• 给元素设置块状化display: block使vertical-align属性失效；
• 尝试不同的vertical-align值如bottom/middle/top；
• 直接修改line-height值；
• 如果line-height为相对值如1.4，设置font-size: 0间接改变line-height。