没有单位的线高

Question

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

数字代表什么？我猜它是一个比例，所以就像em？

Answer 1

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

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

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

Answer 2

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

line-height可以使用以下方式之一指定值

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

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

  

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

Answer 3

请参阅respective spec @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％。

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

Answer 5

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

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

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

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

font-size: 2rem;