CSS: Property: line-height

20th August 2020 at 2:19pm
CSS: Property

line-height 是一个比较特殊的属性,因为大部分情况下它都使用的是 unitless value 而不是其他带单位的值。

比如同样的 HTML,两个不同的看起来类似的 CSS 会有不同结果:

第一个例子中,<p>line-height 是继承自 <body> 的。根据 CSS: Concept: Specified, Computed, Used, and Actual Values,它会继承 <body> 的 computed value,即是 19.2px16px x 1.2)。这会导致实际上 <p> 的字体大小是 32px,而 line-height 只有 19.2px,段落内的文本会挤在一起。而第二个例子中,由于 unitless value 是会不作改变被下面所继承,因此 <p>line-height 会被计算成字体大小的 1.2 倍(38.4px),这样它的渲染结果是合乎预期的。