我看到人们使用行高而不指定单位，如下所示：line-height: 1.5;
数字代表什么？我猜这是一个比率，是这样的em吗？
问问题
9367 次
5 回答
21
是的，它是一个比率：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 倍）。
于 2012-09-06T16:47:18.147 回答
19
line-height@Mozilla Developer Network有一个很好的解释（和示例），与line-heightCSS 规范相比更容易理解。
line-height可以通过以下方式之一指定值
line-height: normal | <number> | <length> | <percentage>
在您的情况下，您使用的<number>是描述为：
使用的值是这个无单位
<number>乘以元素的字体大小。计算的值与指定的 相同<number>。在大多数情况下，这是设置 line-height 的首选方法，在继承的情况下不会出现意外结果。
于 2012-09-06T15:22:50.553 回答
2
于 2012-09-06T15:15:52.233 回答
0
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。等等..
于 2012-09-06T15:20:15.683 回答
0
您还可以使用rem以使用根 em 大小而不是当前字体大小。
所以这些都是当前字体大小的两倍的行高
font-size: 2em;
font-size: 2;
但这是 ROOT 字体大小两倍的行高
font-size: 2rem;
于 2014-09-14T16:38:33.607 回答