Libon

CSS line-height

2Mins #CSS
探索 & 学习 CSS line-height 属性的原理

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 的高度是由行高来撑开的. 就像这样

1
<style>
2
.p1 {font-size:20px; line-height:0; border:1px solid #cccccc; background:#eee;}
3
.p2 {font-size:0; line-height:20px; border:1px solid #cccccc; background:#eee;}
4
</style>
5
6
<p class="p1">123123123</p>
7
<p class="p2">123123123</p>

123123123

123123123

关于行高在文章排版及无障碍访问的使用中有一点需要关注, 即正常情况下行高应该被设置为 1.5, 这能有效避免在很多情况下文字的重叠, 也能改善在低可视条件下对文本内容的阅读.


  1. MDN - css line-height
  2. MDN - 无障碍方面
  3. W3C Understanding WCAG 2.1
  4. 张鑫旭 - css行高line-height的一些深入理解及应用

CD ..