沒有單位的行高

Question

我看到有人使用行高沒有指定單位，像這樣：line-height: 1.5;

這個數字代表什麼？我猜這是一個比例，就像em？

Answer 1

line-height@ Mozilla Developer Network有一個很好的解釋（和例子），這是一個比較容易理解line-heightCSS specification相比。

line-height可以被描述爲通過以下方式

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

在你的情況，您使用的是<number>一個指定的值：

的使用值這個無量綱<number>乘以元素的字體大小。計算值與指定的<number>相同。在大多數情況下，這是設置行高的首選方式，在繼承的情況下不會出現意外的結果。

Answer 2

見respective spec @W3C：

的屬性的使用的值是該數字乘以元素的字體大小。負值是非法的。計算值與指定值相同。

因此，你猜對了它是一個比例，並涉及到目前的font-size。

Answer 3

line-height: X;基本上轉化爲line-height: (X*100)%;

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

同樣，

line-height: 1.5;是一樣line-height: 150%;

---

凡line-height: X%;裝置當前設置的字體的線高度的百分比，以及元素的大小。

例如，如果根據當前設置的字體和大小元素的行高爲24px,line-height: 150%將使其行高爲36px。等等..

Answer 4

是的，它是一個比率：1.5是指元素字體大小的1.5倍。所以它意味着與1.5em或150％相同，但是有一個重要的例外：在繼承中，當使用純數時，數是繼承的，而不是計算的值。

所以，如果你有一個字體大小爲24pt的元素，line-height: 1.5將行高設置爲36pt。但是如果元素有一個子元素，即一個內部元素，字體大小爲10pt，並且沒有設置任何行高度，那麼子元素繼承值爲1.5，這意味着該元素爲15pt。另一方面，如果行高設置爲1.5em或150%，那麼孩子將繼承36pt的計算值，從而創建奇怪的行間距。

從技術上講，這隱藏在formulation之下。對於純數字，用作line-height value：「計算出的值與指定的值相同」。因此，名義上，孩子繼承了1.5的「計算」值，然後在孩子的上下文中對其進行解釋（1.5時間其字體大小）。

Answer 5

您還可以使用rem以使用root em大小而不是當前字體大小。

因此，這些都是當前字體大小的兩倍

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

的兩個白線高度但是，這是ROOT字體大小的兩倍的行高

font-size: 2rem;