在CSS中，line-height:1.5和line-height:150%有什么区别？

Question

有人了解这个吗？

- user198729

Answer 1

简短版： line-height: 150% 是静态的，line-height: 1.5 是动态的。其影响在继承元素上更为明显。例如：

HTML

<div style="font-size: 12px">
    <span style="font-size: 24px">test</span>
</div>

这段CSS代码

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { }                   /* Computed line-height: 18px (inherited directly) */

与此相反：

div { line-height: 1.5 }   /* Computed line-height: 18px (1.5 * 12px) */
span { }                   /* Computed line-height: 36px (1.5 * 24px) */

您可以在CSS2规范页面了解更多信息。

- K Prime

---

如果可以的话，我会给予+2分。这需要我花费很多时间来构思清晰的句子来解释它。 - Gregory Pakosz

我认为150%是根据继承的字体大小计算的，而1.5是根据计算后的字体大小计算的。这样对吗？ - user198729

更像是150%直接继承，但1.5每次都会重新计算。 - K Prime

Answer 2

两者是等价的。

line-height: 1.5（不带单位）将把元素的字体大小乘以1.5来计算行高。

line-height: 150% 将取元素计算后的字体大小的150% 来计算行高，这等同于将其乘以1.5。

以下示例中的三条规则具有相同的行高：

div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

现在让我们看一下你提出的问题：the question you asked。

我重现了这两种情况：

1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

在1)中，父元素的div的line-height设置为实际字体大小的1.5倍。由于你更改了子的实际字体大小，因此该属性将继承并重新计算子的line-height。

在2)中，父元素的div的line-height设置为div的计算字体大小的150%。然后，的计算字体大小从

中继承，因此此继承计算字体大小的150%会导致相同的值。

正如@ K Prime所总结的那样，结论可能是：line-height: 150%是静态的，line-height: 1.5是动态的

参考资料：

• 10.8行高计算：'线高'和'垂直对齐'属性 (CSS2)

- Gregory Pakosz

---

不，它们不是。请参考我的先前帖子： http://stackoverflow.com/questions/2040694/how-to-fix-this-kind-of-problem - user198729

“元素的字体大小”和“元素的计算字体大小”不是同一件事吗？ - user198729

不是的。我花了一些时间上传文件，在此期间其他答案也完全没问题。 - Gregory Pakosz

Answer 3

line-height:  normal | 

<number>| 

<length>| 

<percentage>

来自 行高

<number>

使用的值是无单位的乘以元素的字体大小。计算值与指定值相同。在大多数情况下，这是设置行高的首选方法，可以避免继承时出现意外结果。

<percentage>

相对于元素本身的字体大小。计算后的值是该百分比乘以元素计算后的字体大小。

- rahul