line-height
是一个比较特殊的属性,因为大部分情况下它都使用的是 unitless value 而不是其他带单位的值。
比如同样的 HTML,两个不同的看起来类似的 CSS 会有不同结果:
第一个例子中,<p>
的 line-height
是继承自 <body>
的。根据 CSS: Concept: Specified, Computed, Used, and Actual Values,它会继承 <body>
的 computed value,即是 19.2px
(16px
x 1.2)。这会导致实际上 <p>
的字体大小是 32px
,而 line-height
只有 19.2px
,段落内的文本会挤在一起。而第二个例子中,由于 unitless value 是会不作改变被下面所继承,因此 <p>
的 line-height
会被计算成字体大小的 1.2 倍(38.4px
),这样它的渲染结果是合乎预期的。