5.4 CSS 行高(line-height)

行高是为了提升可读性(readibility)

line-height 属性用来定义行间的距离(行高),该属性会影响行框的布局。

在应用到一个块级元素时,它定义了每行的高度,主要是在为了在每行之间添加空白距离来提高可读性。 line-height 与 font-size 的计算值之差,也就是行间距,会被分为两半,分别加到一个文本行内容的顶部和底部。

上图中,虚线框部分代表行高,浅灰色框部分代表字体高度,深灰色部分代表字符“x”的高度。基线(baseline)和字符x的底部平齐,而中间线(middle)和字符x的中心点平齐。

line-height 属性可以使用如下类型的值:

  • px
  • em
  • %
  • 无单位数字,比如 1.5

无单位数字和百分比类似,1.5 和百分比 150% 相同。前者写法要简洁些。

行高的重要性

和Photoshop/Word软件中的行距(line-spacing)一样,line-height 是为了在每行文本之间添加间距,以提高文本段落的可读性。 由于可读性依赖于文本的大小,所以推荐使用动态的相对尺寸来定义行高。而px 定义了静态的绝对值,一般情况下并不合适。

px 适用于某些特定场合,比如想实现和字体大小无关的文本对齐。

body{ font-size: 16px; line-height: 1.5;}

上例中,行高计算结果为:16 * 1.5 = 24px

行高的继承性

line-height 属性是可以被继承的,从层叠的元素里传递下来。但是继承规则有点复杂。

如果使用的是像素px,那么子元素行高继承静态值不变。

如果使用的是百分比120%,那么子元素将继承计算后的高度,而和子元素的字体大小(font-size)无关,所以实际上对于子元素而言继承的也还是静态值。

如果使用的是无单位数字或者normal(约等于无单位数字1.2),那么子元素将先继承计算前的相对值,然后按照子元素font-size来计算高度。这种情况继承的是动态值。

你可以用下面的例子在线测试(点击“Edit on Techbrood”,然后在CSS面板中修改代码),直观感受不同方式之间的区别:

一般而言,我们会发现:

  • 使用像素(绝对值)会使得标题太紧,小字体文本太松(如上例“Result”标签中所示)。因为标题字体一般比较大,行间距小的话,上下行就会挤在一起(甚至产生覆盖);
  • 使用百分比也和像素差不多,比如父元素字体为16px,行高120%,那么子元素实际继承的行高总是16*1.2=19.2px(约为20px),而和子元素的字体大小无关;
  • 使用无单位数字,如果数值较大(如1.5),子元素继承到的也是相对数字1.5然后再乘以自己的字体大小(也就是和子元素字体大小相关),那么假定标题字体为30px,行高计算为30px*1.5=45px,会导致标题太松。

所以实践下来,一个比较好的可读性选择是使用无单位数字来设置行高,并使用如下经验值:

  • 内容文本设置为:1.5
  • 标题文本设置为:1.2