2019獨角獸企業重金招聘Python工程師標準>>>

先來看MDN上的總結：

• On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

• On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.

• On replaced inline elements, like buttons or other input element, line-height has no effect.^[1]

也就是說：

在block level elements（塊元素）上使用line-height，也就指定了塊元素內部line boxes的最小高度

在non-replaced inline elements上使用line-height，line-height會被用來計算line boxes的高度。

在replaced inline elements上使用line-height沒有效果。例如：button或者其它input標簽。^[1]

第3條規則看起來最容易理解，我們先拿它來實驗下，看測試用例一：

.button-1{line-height:?20px;}.button-2{line-height:?30px;}.input-1{line-height:?20px;}.input-2{line-height:?30px;}

效果如下：出人意料的是在replaced inline elements上使用line-height居然有效果，與第3條規則不符。注意到第3條規則是有注解的。還好，注解里給出了原因：

_{[1] Neither engine implements the correct behavior with replaced inline elements like buttons. In some cases line-height is allowed to have an effect on them. This is incorrect behavior relative to the specification.}

也就是說瀏覽器都沒有正確的實現這一效果。按照CSS規范來看，瀏覽器在這一效果上都錯了。

接著來看第2條規則：

• 在non-replaced inline elements上使用line-height，line-height會被用來計算line boxes的高度。

至于到底如何計算，它并沒有說明。在介紹計算規則之前，需要先明確幾個概念。用代碼說話：

<p>The?<em>emphasis</em>?element?is?defined?as?"inline".</p>

顯示效果如下：上面的代碼涉及到了四種盒子：

block-level boxes（塊級盒），由代碼中的<p>標簽產生，它可以包含其它的box。

inline-level boxes（行級盒），在<p>標簽中有一系列的inline-level boxes，如下：上面的inline-level boxes可以分為兩類，一類是由內聯元素產生的，例如<em>而余下的兩個沒有被標簽包裹的inline-level boxes就被稱為anonymous inline-level boxes（匿名行級盒），如下：

line box，由inline-level boxes連接而成，每一行稱為一個line box

content area，它是圍繞著文字的并且看不見的一種box，它的高度取決于font-size。如下：

概念介紹完了，回到我們的問題上：

non-replaced inline elements如何根據line-height來計算line boxes的高度

上面我們說過line box是由inline-level boxes連接而成，所以我們將問題拆成兩步：

先探究line-height與inline-level boxes高度的關系

再看inline-level boxes的高度與line box高度的關系

先來看看line-height與inline-level boxes高度的關系，測試用例二： 再結合下面這張圖你應該就能看明白了。

我們把line-height: 30px與font-size: 20px的差值10px稱為行間距（英文是leading）。那么半行間距（英文是half-leading）就是10px / 2 = 5px。半行間距作用在content area的頂部和底部。很簡單，對不對？

但是別忽略了，上面計算的前提是line-height大于font-size，那如果line-height小于font-size會怎么樣呢？來看測試用例三： 我們看到當line-height小于font-size時，inline-level boxes會使用line-height作為自己的高度，此時 content area 會溢出 inline-level boxes ，如下圖所示：那么如果將line-height設置為0會出現啥效果呢？我們以后再探究。

至此，我們說完了line-height與inline-level boxes高度的關系，接下來該看inline-level boxes的高度與line box高度的關系了。記住下面這條規則：

line box 的高度由它內部 最高的 inline-level boxes 或 replaced element 來決定。

來看測試用例四： 至此，我們終于清楚了line-height與line boxes高度的關系，也就清楚了MDN上第2條規則的含義：

• 在non-replaced inline elements上使用line-height，line-height會被用來計算line boxes的高度。

需要補充的一點是：line boxes 在它的容器里是緊挨著彼此堆疊到一起的，看下圖會更好理解一些：最后，我們來看第1條規則：

• 在block level elements（塊元素）上使用line-height，也就指定了塊元素內部line boxes的最小高度

理解這一條需要一點想象力，看著下圖，開動你的想象力：

想象在每一個line box的起始位置都有一個寬度為零的 inline-level boxes ，我們把這個想象出來的盒子叫做strut（這個名字來源于TeX）。strut會根據繼承來的font-size 和 line-height 計算本身所占高度。這個高度也就是所在line boxes的最小高度。

參考文獻：

http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height

http://www.w3.org/TR/css3-box/

CSS布局

一個關于line-height非常好的PPT，本文部分圖片來自這個PPT，需翻墻

轉載于:https://my.oschina.net/u/1865850/blog/291286

總結

以上是生活随笔為你收集整理的『转』line-height的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。