Question

请先查看以下摘要：

＆＃13;

body {
  line-height: 1;
}

＆＃13;

<h1>
  Hello <br> world
</h1>

＆＃13;

body {
  line-height: 100%;
}

＆＃13;

<h1>
  Hello <br> world
</h1>

＆＃13;

较高的一个使用line-height: 1;，而较低的一个使用line-height: 100%;。我认为它们必须完全相同，MDN似乎同意我的意见：

<number>

使用的值是无单位<number>乘以元素＆＃39; s   字体大小。计算的值与指定的<number>相同。   在大多数情况下这是设置行高的首选方式，而不是   在继承的情况下意外结果。

<percentage>

相对于元素本身的字体大小。计算出的值是   此百分比乘以元素的计算字体大小   百分比和 em 值可能会产生意外结果，请参阅＆＃34;注意事项＆＃34;部分。

并在＆＃34; Notes＆＃34;部分：

使用line-height设置font通常会更方便如＆＃34;示例＆＃34;中所述的快捷方式以上部分。

然而，实际上，它们是不同的！

我的问题是：为什么它们不同，我应该更喜欢MDN建议的<number>？

我使用的是Safari Version 10.0.1（12602.2.14.0.7）。

Answer 1

真正的原因是他们的工作方式不同，可以通过查看W3C Specs for line-height和inheritance来理解。以下是关于无单位值（<number>）和百分比值的行高的规范。

＆lt; number＆gt; - 属性的已使用值是此数字乘以元素的字体大小。负值是非法的。 计算值与指定值 相同。

＆lt; percentage＆gt; - 属性的 计算值是此百分比乘以元素的计算字体大小 。负值是非法的

作为BoltClock points out in his comment（正常地，像往常一样），继承始终以相同的方式工作， 始终是继承的计算值 。与措辞的混淆是因为我指的是规范的旧版本，而新的版本非常清楚并使用了正确的词语。

当指定无单位值（数字）时，line-height的指定值是也是计算值的数字。因此，h1（子）继承了1的数字，但仍然需要将此数字解析为可以使用的实际line-height 。因此，通过将继承因子与h1元素的font-size（即2em = 32px）相乘并设置{{1}，根据规格计算使用的值} line-height。

对于百分比，32px line-height的计算值是正文字体大小（body）的100％，因此等于{{ 1}}。现在由于此16px是计算值，16px子继承此值并按原样使用它，因为不需要进一步的解析。

这就是为什么两个片段之间存在差异的原因，因为16px的行高为16px而另一行为32px。

如果我们直接在h1设置h1，那么我们可以看到输出匹配，因为现在line-height: 100%计算自己的行高为2em（或32px）的100％与1 *它的字体大小相同。

＆＃13;

h1

＆＃13;

h1

＆＃13;

是行高：1相当于100％？

1 个答案: