line-height数值 vs 百分比
这两天在啃《CSS权威指南(第三版)》,读到line-height
的部分有点迷糊,于是在网上翻了点资料,在此整理下思路。
属性
W3school上对line-height属性只有一句话的解释:
line-height 属性设置行间的距离(行高)。
看似简单明了,但其实这个属性有很多猫腻。本文先不涉及line-height
的显示机理,来看看这个属性可以取什么值吧。
值 | 描述 |
---|---|
normal | 默认。设置合理的行间距。 |
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 |
length | 设置固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值。 |
一个个说过来:
- normal:这是默认值,一般等于 1.2 (依用户代理不同可能取 1.0~1.2 ),所以实质上就是number
- number:这个数字的意思就是倍数,如果元素的
font-size
是 16px ,line-height
取 1.5 ,那么就等于 16px X 1.5 =24px - lengh:直接定义一个单位数值,比如 20px , 2cm 。注意取 em 单位时,其实也相当于下面提到的%。
- % 如果元素的
font-size
是 16px ,line-height
取 150% ,那么就等于 16px X 150% = 24px 。没错,看起来似乎和number没多大区别 - inherit:直接继承父元素的
line-height
值
于是问题的关键就出在number和百分数上了,把问题具体一点, 1.5 和 150% 有什么区别? 这就得做测试了。(以下测试均在Safari 7.0.3上进行)
测试
先从单独的p
元素开始测试(不涉及继承)。
测试一:父元素 line-height: 150% ,无子元素
<p style="font-size: 16px; line-height: 150%; background-color: gray; color: white;">
I'm so happy, that I've found you.
</p>
效果如下:
I'm so happy, that I've found you.
测试二:父元素 line-height: 1.5 ,无子元素
<p style="font-size: 16px; line-height: 1.5; background-color: gray; color: white;">
I'm so happy, that I've found you.
</p>
效果如下:
I'm so happy, that I've found you.
如预想的一样,测试一和二没有区别!p
元素的行高均为 24px 。但是等等,如果我们在p
中再内联一个font-size
不同的span
元素呢?
测试三:父元素 line-height: 150% ,子元素 line-height 继承
<p style="font-size: 16px; line-height: 150%; background-color: gray; color: white;">
I'm so <span style="font-size: 32px; color: red;">happy</span>, that I've found you.
</p>
效果如下:
I'm so happy, that I've found you.
看起来行高有点不够happy啊…… 我们用网页检查器看一下,span
元素的line-height
还是只有 24px 。
why? 按理说应该是 32px X 150% = 48px 啊?这中间一定有什么误会,但容我们先放一放,先来看看下一个测试。
测试四:父元素 line-height: 1.5 ,子元素 line-height 继承
<p style="font-size: 16px; line-height: 1.5; background-color: gray; color: white;">
I'm so <span style="font-size: 32px; color: red;">happy</span>, that I've found you.
</p>
效果如下:
I'm so happy, that I've found you.
hmm... 可以很明显看出p
元素被span
撑高了,再来看一看span
的行高,这次终于是 48px 了。
测试五:父元素 line-height: 150% ,子元素 line-height 150%
<p style="font-size: 16px; line-height: 150%; background-color: gray; color: white;">
I'm so <span style="font-size: 32px; color: red; line-height: 150%;">happy</span>
, that I've found you.
</p>
效果如下:
I'm so happy , that I've found you.
哦,这次也正常了。这么说只要显式声明了line-height
的值,就能得到我们想要的结果。
解决
综合上面五个测试的结果,我们很容易发现问题就出在继承上。哪里和我们预想的不一样?
对于line-height
属性来说,如果使用百分数(或者em单位),子元素继承的是父元素的计算值,而非声明值!
测试三中,p
元素的line-height
声明值为 150% ,计算值为 16px X 150% = 24px 。接下来span
元素继承了计算值 24px !
而在测试四中,p
元素的line-height
声明值为 1.5 ,计算值为 16px X 1.5 = 24px 。但因为 1.5 并非百分数而是一个绝对值,所以span
元素继承了声明值 1.5 ,并把它和本身的font-size
进行计算,也就是 32px X 1.5 = 48px 。
这样看起来要解决这个问题的方法只有两个:
- 在每个子元素中显式声明
line-height
值 - 在父元素中对
line-height
值使用绝对值
方法一实在太麻烦了,因此该选哪边一目了然。