深刻理解-CSS內聯元素之line-height

上一篇文章咱們討論了font-size，這一篇來講另外一個與文字關係密切的屬性line-height。這裏涉及到了內聯盒模型相關的東西，這裏保持了與上一篇相似的結構，先來講說概念，而後是度量單位，最後來聊一個常見的內聯元素的現象。

內聯盒模型相關概念

說到盒模型，只要瞭解css的基本都知道這個概念，但說到內聯盒模型可能不少人不是特別清楚。如今咱們就來講說內聯盒模型幾個重要的概念。先看圖概覽一下，再逐項往下看。

Tip: 圖中用不一樣顏色的框標註了不少框，這些表明咱們下面要說的不一樣的盒子或不一樣的概念。

inline-box

inline-box又名內聯盒子，一般由一些標籤包裹造成，最經常使用的如<span>標籤包裹文字會造成內聯盒子，那些沒有標籤包裹的文字默認本身造成一個盒子稱爲anonymous inline box匿名內聯盒子。

line-box

line-box名爲行框，從名字就能夠看出，它是由單行內聯元素造成的一個區域，注意是每一行都會造成，若是文字由五行，就會造成5個行框。行框的高度基本上是由行框中行高最大的內聯盒子決定的。我使用基本上這個詞，是由於還有其餘狀況，好比受到vertical-align屬性的影響。

containing-box

container-box就是包含塊的意思，在內聯元素中，包含塊是由行框組成的。說白了就是包裹在全部行框外面的那層盒子。

struct

這個詞可能不少同窗見的比較少，張鑫旭大神稱之爲」幽靈空白節點「，咱們這裏就用直譯過來的詞」支柱「。

在CSS規範中有這麼一句話，Each line box starts with a zero-width inline box with the element's font an d line-height properties. We call that imaginary box a 」struct"。翻譯過來意思就是每個行框開始的位置都有一個寬度爲0，而且行高和字體大小都與該元素相同的內聯盒子。這個假想的內聯盒子就被稱爲「支柱」。簡單來講就是能夠想象成行框前面有一個寬爲0的空字符。

可能有的人會問，這個東西有什麼用那？(⊙v⊙)嗯，用處大了去了，因爲其幾乎無處不在的特性而且因爲寬度爲0，咱們平時在內聯元素中遇到的不少奇怪的問題都是由「struct」引發的。咱們暫時先放下這個，文章的最後咱們再看這個東西引起的問題。

度量單位

這一部分說說行高的單位，咱們再也不列出全部的單位，由於這些徹底能夠從官方文檔上看到，咱們這裏只說說重要的或者說容易錯的部分。

默認值

line-height的默認值是什麼，查下手冊咱們就能很容易的看到，它的值是normal，那麼normal是多大？從個人理解來講，它的值受到font-family和瀏覽器的影響，IE/Firfox與chorme表現存在部分不同的地方。但能夠知道的是normal的初始值與字體的content-area的區域高度相同。不瞭解content-area的同窗能夠去看個人上一篇文章的line-height部分。這裏簡單說一下，inline水平的元素設置背景後，背景部分就是內容區域的部分，與初始line-height同高。

百分比、em和數值的區別

百分比和em與數值的區別在於繼承性質上的不一樣，百分比和em被繼承的是計算後的值，而數值類型的繼承的是一種「計算規則」。

常見問題

這一部分咱們來講一說常見的內聯元素的一些問題。

display: inline-block元素間的空隙

這個問題，你們都遇到過，你們能夠看看我作的實例的第一部分。首先咱們會看到元素和元素之間的必定的間隙。這個間隙會引起的問題有，若是咱們設置兩個display: inline-block的元素寬度爲width: 50%都向右或向左浮動，可是確沒法排在一行的狀況。這就是因爲多出了這一點間隙，致使容器寬度不足，最後容器一行沒法放不下兩個寬度都爲容器一半寬度的元素。

有人可能以爲這些元素間的間隙比較奇怪，但這是一種正常現象，由於內聯元素原本的排版就應該有間隙，你可以想象文字和文字之間沒有間隙的狀況嗎？內聯元素之間原本就應該獨立分開。怎麼解決這個問題，網上也有不少答案，這裏只簡單提一下，由於咱們主要說的是原理嘛。經過設置font-size爲0，或者使用letter-spacing屬性，均可以達到去除內聯元素之間的間隙的目的。

在我實例第一部分中應該不少人也注意到，在父容器的最底端也有一個空隙，這個究竟是什麼那？還記得我上面概念中提到的struct嗎，這種現象就是由這個東西引發的，因爲其不可見，全部咱們用一個內聯元素x來代替。這裏能夠看實例的第二部分。這個現象的緣由是因爲內聯元素是默認vertical-align元素對齊的，而咱們的內聯元素的基線是默認爲元素的底邊緣，sturct元素又有本身的行高，當它的基線與咱們的內聯元素對齊時，它的行高會撐起一部分距離，就出現了實例中的現象。

知道了緣由，咱們解決起來也很簡單。只要struct元素的行號爲0就能夠了，全部咱們能夠設置父元素的line-height: 0或者經過設置font-size: 0來間接設置line-height爲0。可能已經有人法相，font-size: 0能夠同時解決元素間的間隙和底部的間隙，因此我更喜歡用這個方法。

下面咱們作一下其餘的操做，咱們在實例第三部分中，前面三個inline-block元素中加上文字，發現元素都往下移動了，這又是什麼原理那。這其中就涉及到了vertical-align屬性的一些性質，咱們下一篇就來說講vertical-align，而且來講說這種現象的緣由。

文章中若有錯誤的地方，或者您有更好的建議歡迎指正~，原文連接。