没有单位的线高

Question

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

这个数字代表什么？我猜它是一个比例所以它是什么样的em？

Answer 1

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

因此,如果您有一个字体大小line-height: 1.5为24pt 的元素,请将行高设置为36pt.但是如果元素有一个子元素,即一个内部元素,字体大小为10pt,并且没有设置任何行高,则子line-height元素继承值1.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>.在大多数情况下,这是设置行高的首选方法,在继承的情况下没有意外结果.