在CSS中，line-height：1.5和line-height：150％有什麼區別？

Question

有人知道嗎？

Answer 1

簡版：line-height: 150%是靜態的，line-height: 1.5是動態的。對繼承元素的影響更爲明顯。舉個例子：

HTML

<div style="font-size: 12px"> 
    <span style="font-size: 24px">test</span> 
</div> 

這個CSS

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */ 
span { }     /* Computed line-height: 18px (inherited directly) */ 

與此相反：

div { line-height: 1.5 } /* Computed line-height: 18px (1.5 * 12px) */ 
span { }     /* Computed line-height: 36px (1.5 * 24px) */ 

你可以閱讀更多的CSS2 specs page

Answer 2

兩者相當。

line-height: 1.5（沒有單位）會將元素的字體大小減去1.5來計算行高度。

line-height: 150%將採取該元素的計算字體大小的150%計算行高度，相當於由1.5乘以它。下面

例子中的三個規則具有相同的結果行高度：

div { line-height: 1.2; font-size: 10pt }  /* number */ 
div { line-height: 1.2em; font-size: 10pt } /* length */ 
div { line-height: 120%; font-size: 10pt } /* percentage */ 

現在讓我們來看看the question you asked。

我再現了兩種情況：

1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

在1），母公司的div的line-height設置爲1.5乘以div的實際字體大小。由於您更改了其實際字體大小，因此該屬性將繼承並重新計算給子span。

在2）中，父級的div的line-height設置爲div的計算字體大小的150%。然後span的計算字體大小從div繼承，因此該繼承計算字體大小的150%導致相同的值。

作爲@K總理總結出來的，該帶走的是可能：line-height: 150%是靜態的，line-height: 1.5是動態

參考文獻：

• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties（CSS2）

Answer 3

line-height: normal | 

<number>| 

<length>| 

<percentage> 

從line-height

<number> 

使用的值是無單位乘以元素的字體大小。計算出的值與指定的值相同。在大多數情況下，這是在繼承情況下設置行高並且沒有意外結果的首選方法。

<percentage> 

相對於元素本身的字體大小。計算出的值是該百分比乘以元素的計算字體大小。