ToC
取值
normal
取决于用户端。桌面浏览器(包括 Firefox)使用默认值,约为 1.2
,这取决于元素的 font-family
。
数字
该属性的应用值是这个无单位数字 <数字> 乘以该元素的字体大小。计算值与指定值相同。大多数情况下,这是设置 line-height
的推荐方法,不会在继承时产生不确定的结果
长度
指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果(见下面的例子)。
百分比
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果。
以上是 MDN 上对它的描述,下面我们再试着详细一点的理解它。
字面意思
“行高”顾名思义指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是 a,c,z,x 等字母的底边线。
---顶线(top line)-----------------
------中线(middle line)-----------
---------基线(base line)----------
------------底线(bottom line)-----
在 CSS 的高度中有一个经常被误解的事情就是: inline box
的高度是由文字撑开的. 但其实不是, 其实 inline box
的高度是由行高来撑开的. 就像这样
123123123
123123123
关于行高在文章排版及无障碍访问的使用中有一点需要关注, 即正常情况下行高应该被设置为 1.5
, 这能有效避免在很多情况下文字的重叠, 也能改善在低可视条件下对文本内容的阅读.