上一篇文章我們討論了font-size，這一篇來說另一個與文字關係密切的屬性line-height。這裡涉及到了內聯盒模型相關的東西，這裡保持了與上一篇類似的結構，先來說說概念，然後是度量單位，最後來聊一個常見的內聯元素的現象。
內聯盒模型相關概念
說到盒模型，只要瞭解css的基本都知道這個概念，但說到內聯盒模型可能很多人不是特別清楚。現在我們就來說說內聯盒模型幾個重要的概念。先看圖概覽一下，再逐項往下看。
Tip: 圖中用不同顏色的框標註了很多框，這些代表我們下面要說的不同的盒子或不同的概念。
inline-box
inline-box又名內聯盒子，通常由一些標籤包裹形成，最常用的如<span>標籤包裹文字會形成內聯盒子，那些沒有標籤包裹的文字預設自己形成一個盒子稱為anonymous inline box匿名內聯盒子。
line-box
line-box名為行框，從名字就可以看出，它是由單行內聯元素形成的一個區域，注意是每一行都會形成，如果文字由五行，就會形成5個行框。行框的高度基本上是由行框中行高最大的內聯盒子決定的。我使用基本上這個詞，是因為還有其他情況，比如受到vertical-align屬性的影響。
container-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，並且來說說這種現象的原因。
文章中如有錯誤的地方，或者您有更好的建議歡迎指正~，原文連結。