CSS:理解行高 line-height

行高、行距、半行距

理解行高

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

行高

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

行距

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

半行距

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

继承

line-height 是可以继承的。父元素不同的行高单位影响子元素的继承。例如:

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

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

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

JSFiddle 源码

line-height的单位和继承

阅读 2.2k

推荐阅读
Teraflopst
用户专栏

我的专栏

7 人关注
18 篇文章
专栏主页