line - 不带单位的线高

Question

我看到人们使用行高而不指定单位，如下所示：line-height: 1.5;

数字代表什么？我猜这是一个比率，是这样的em吗？

Answer 1

是的，它是一个比率：1.5 表示元素字体大小的 1.5 倍。所以它的含义与 1.5em 或 150% 相同，但有一个重要的例外：在继承中，当使用纯数字时，继承的是数字，而不是计算值。

因此，如果您有一个字体大小为 24pt 的元素，line-height: 1.5请将行高设置为 36pt。但是如果元素有一个子元素，即内部元素，字体大小为 10pt，并且没有设置任何行高，那么子元素继承line-height1.5 的值，这意味着该元素为 15pt。另一方面，如果将行高设置为1.5em或150%，则子级将继承计算值 36pt，从而产生怪诞的行距。

从技术上讲，这隐藏在一个表述下。对于用作line-height值的纯数字：“计算值与指定值相同。” 因此，名义上，子代继承了“计算”值 1.5，然后将在子代的上下文中进行解释（其字体大小的 1.5 倍）。

Answer 2

line-height@Mozilla Developer Network有一个很好的解释（和示例），与line-heightCSS 规范相比更容易理解。

line-height可以通过以下方式之一指定值

line-height: normal | <number> | <length> | <percentage>

在您的情况下，您使用的<number>是描述为：

使用的值是这个无单位<number>乘以元素的字体大小。计算的值与指定的 相同<number>。在大多数情况下，这是设置 line-height 的首选方法，在继承的情况下不会出现意外结果。

Answer 3

请参阅各自的规范@W3C：

该属性的使用值是这个数字乘以元素的字体大小。负值是非法的。计算值与指定值相同。

因此，正如您所猜测的那样，它是一个比率，与电流有关font-size。

Answer 4

line-height: X;基本上翻译成line-height: (X*100)%;

line-height: 1;是相同的line-height: 100%;

相似地，

line-height: 1.5;是相同的line-height: 150%;

---

其中line-height: X%;表示元素当前设置的字体和大小的行高的 X% 。

例如，如果根据当前设置的字体和大小，元素的 line-height 为24px，line-height: 150%则将使其 line-height 36px。等等..

Answer 5

您还可以使用rem以使用根 em 大小而不是当前字体大小。

所以这些都是当前字体大小的两倍的行高

font-size: 2em;
font-size: 2;

但这是 ROOT 字体大小两倍的行高

font-size: 2rem;