请先查看以下摘要：
body {
line-height: 1;
}<h1>
Hello <br> world
</h1>
body {
line-height: 100%;
}<h1>
Hello <br> world
</h1>
较高的一个使用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）。
答案 0 :(得分：8)
真正的原因是他们的工作方式不同，可以通过查看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 *它的字体大小相同。
h1h1