CSS：理解行高 line-height

行高、行距、半行距

从上到下四条线分别是 顶线，中线，基线，底线。

行高

指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。
行高数值上等于 字体大小+行距，而行距的一半（半行距）加在顶线上方，一半加在底线下方。

行距

指一行底线到下一行顶线的垂直距离。

半行距

行距的一半。半行距 = (行高 - 字号) / 2
CSS 中的 margin-top 不是从文字的顶线算起的，而是从离顶线半个行距的上方开始算起的。同理，margin-bottom 是从离底线半个行距的下方开始算起的。

继承

line-height 是能够继承的。父元素不一样的行高单位影响子元素的继承。例如：

• 父元素的行高为 24px 时，子元素直接继承此固定的行高

• 父元素的行高为 150% 或 1.5em 时，会根据父元素的字体大小先计算出行高值而后再让子元素继承

• 父元素的行高为 1.5 时，根据子元素的字体大小动态计算出行高值让子元素继承。

JSFiddle 源码