line-height:normal是怎樣計算的?

01-14

line-height:normal不同瀏覽器值不同？具體是怎樣的？

這是 CSS 里最難的知識點……就算你翻爛 W3C 文檔都沒用，依然理解不了。W3C 只會告訴你這個值是字體自己的特性，但是原理到底是怎樣的，你無從得知。

我推薦你看這篇文章，原理講得很清楚：深入理解 CSS：字體度量、line-height 和 vertical-align

我保證大部分人看完這篇文章，就再也不想碰 vertical-align 了，而且依然理解不了 line-height。

因為你需要有一些「字體設計」的常識才能理解這篇文章。

這個知識點往大了說就是對 IFC 的理解。

前端為什麼只講 BFC（Block Formatting Context）不講 IFC（Inline Formatting Context）？因為大部分前端不懂啊。

面試官甚至根本就不問 IFC（連他自己都不懂怎麼敢問你啊）。

衍生問題：為什麼 & 下面會無緣無故多出幾像素？JS Bin

衍生問題2：為什麼把 font-size 變小之後，p 元素反而變高了？JS Bin

這個問題涉及的知識點太細了，我一般不敢問面試者。

如果我的答案激起了你對「字體設計」的興趣，你可以看看《Helvetica》這部電影。

關於經典字體Helvetica的故事

然後關注一下知乎上的字體設計師，翻翻他們的回答。

如果我的答案讓你退縮，也不要緊，因為很多人都跟你一樣退縮了（這樣說你是不是就好受一些 : )

從實際角度出發，我建議還是別了解 IFC 了，太難用了，直接用 FFC（Flex Formatting Context）吧。

P.S. 你問 CSS，我卻把你帶到了字體設計領域，估計又有人要說我裝逼了

你給前端新人教這麼多知識幹啥！他的大腦裝得下嗎？

我的回答：你的大腦容量小不代表別人大腦容量也小。

Values

normal

&
The used value of the property is this number multiplied by the element"s font size. Negative values are illegal.

&
The specified length is used in the calculation of the line box height. Negative values are illegal.

&
The computed value of the property is this percentage multiplied by the element"s computed font size.

inherit
Takes the same specified value as the property for the element"s parent.

簡而言之：line-height不允許負值，給定值之後會根據font-size計算行高，line-height指定的行高是行高最小值，設置height可以增大行高

line-height的計算：以px為例，line-height減font-size再除以二，即為font的上下間距

normal的情況為默認值，瀏覽器會計算出「合適」的行高，多數瀏覽器（Georgia字體下）取值為1.14，即為font-size的1.14倍，如果未設定font-size，那既是基準值16px的1.14倍

單獨討論這個取值是沒什麼意義的，因為normal和具體的數值相比，會因為字體的不同而不同

如果是項目需要，還是給定一個值好一些

http://css-class.com/test/css/text/linebox-line-height-011.html

CSS/Properties/line-height

CSS line-height property

Visual formatting model details，w3文檔原話：

normal

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for "normal" between 1.0 to 1.2. The computed value is "normal".

意思就是設置為normal的時候具體的數值取決於當前元素所用的字體，推薦是1到1.2之間。

然後我寫了一個頁面測了一下，確實是對於不同的字體用的值不一樣，上面是宋體，下面是默認的字體：

JS Bin