行高：1.5和行高：css中的150％有什么区别？

Question

有人知道吗？

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 specs page

了解更多信息

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乘以div的实际字体大小。此属性是为子span继承并重新计算的，因为您更改了其实际字体大小。

在2）中，父div的line-height被设置为div的计算字体大小的150%。然后span的计算字体大小继承自div，因此此继承的计算字体大小的150%导致相同的值。

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

参考文献：

• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties（CSS2）

Answer 3

line-height:  normal | 

<number>| 

<length>| 

<percentage>

来自 line-height

<number>

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

<percentage>

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