簡介
內聯元素由於涉及到文本字體，讀寫方向，漢字和字母差異等諸多方面的影響，因此其盒模型比塊級元素更加復雜，對於內聯非替換元素，比如一行文本，主要由以下幾種框構成：
"em 框"，也稱為字符框( "character box" )，對 <span> 這種內聯非替換元素設置背景，顯示出來的區域就是它，顧名思義，由於 1em 的大小等於1倍 "font-size" 的大小，因此 "em框" 的高度從感知上來講恰好等於 "font-size" 的大小；
"內容區"，現在考慮這種情況：在一個 <p> 標簽中插入兩個或多個 <span> 標簽，每個 <span> 標簽都有一個自己的 <em> 框(因為可以單獨給某個 <span> 標簽設置 "font-size")，而這些 "em框" 的組合就稱為內容區；
“行內框”，與 "em框" 不同，行內框的高度是由 "line-height" 的大小決定；
"行間距"，是 "line-height" 與 "font-size" 之差，這個差實際上要分為兩半，分別應用到內容區的頂部和底部，稱為半間距；
"行框"，行框的上邊界位於一行中最高行內框的上邊界，行框的下邊界位於一行中最低行內框的下邊界；
如圖所示：
內聯非替換元素盒模型的一些特性：
1.垂直方向上的內邊距，邊框和外邊距無效，它的高度僅由行高決定。雖然可以設置這些屬性，例如：{ border: solid 2px #000; } 但是高度計算會被忽略；
2.如果一個行框沒有足夠的水平空間容納一個或多個行內框，那么會創建一個新的行框，換句話說一個行內元素是可以跨行存在的；
3.當一個行內框跨行時，在邏輯上任然是單一的框，因此，水平方向的內邊距，邊框和外邊距只會作用於這個行內框的第一行開始部分和最后一行結束部分；
字母 x 與 css 世界的基線
凡是涉及到內聯元素的大都離不開 "line-height" 和 "vertical-align" 兩個屬性，而這兩個屬性的定義均與基線(" baseline ")有關，"line-height" 的定義就是兩行基線之間的間距，"vertical-align" 的默認值就是基線對齊，那基線到底指的是什么呢？
首先，對於英語來說，大部分字母坐落在一條看不見的線上，稱為基線，由於不同字體基線高度也應該不同，比如 "微軟雅黑" 下沉就比較厲害，而 "宋體" 就顯得比較方方正正，為了解決字體帶來的差異，聰明的 css 規范制定者們將基線定義在字母 "x" 的下邊緣，如圖：
另外，還有幾個衍生而來的概念，比如："x-height"，指的是一個字母 "x" 的高度，單位 "ex" 就是這么來的，css 中有些屬性值的定義就與它有關，最典型的代表就是 { vertical-align:middle; }，這里的居中對齊就是將元素行內框的垂直中點與行框的基線往上 0.5ex 處的一點對齊，也就是 "x" 的交叉點，例如：
<!-- html --> <div class="bg"> <span class="span1">xxx</span><span class="span2">xxx</span> </div>
//css
.bg { background: #000;color: #333; }
.span1 { font-size: 40px;background: lightblue;vertical-align: middle; }
.span2 { font-size: 70px;background: yellow; }
運行結果：
不好意思，運行結果貌似跟規范里描述的差距也太大了吧，那究竟是什么原因造成的呢？一方面 { vertical-align: middle; } 確實有着謎一樣的規則，不然也不會有這么多人在網上問 "vertical-align" 垂直居中為什么無效類似的問題了，另一方面，在許多教程文檔和參考手冊中將這個值的作用講得非常簡單：用於內聯元素垂直居中，稍微詳細一點的就像上面那樣，將元素行內框的垂直中點與行框的基線往上 0.5ex 處的一點對齊。關鍵就在這個 "ex" 上，它是一個相對單位，如果沒有在父容器上設置字體大小，那么它將繼承瀏覽器默認字體大小，不同瀏覽器字體大小不同，除此之外，還有各種全局字體樣式，最后的結果可想而知。
解決辦法就是事先在父容器規定字體的大小，上面例子中，基線位於黃色背景 "xxx" 的下端，它的 "font-size" 為 "70px"，於是：
//css
.bg { background: #000;color: #333;font-size: 70px; }
.span1 { font-size: 40px;background: lightblue;vertical-align: middle; }
.span2 { font-size: 70px;background: yellow; }
運行結果：
這次結果就很完美了。
關於 line-height
"line-height" 決定了內聯非替換元素的高度，默認值是 "normal"，還支持數值，百分比值和長度值：
"normal"：默認值在不同的瀏覽器中不同，而且與 "font-family" 有關；
數值：例如，{ line-height: 1.5; }，其最終結果就是和 "font-size" 相乘后的值；
百分比值：例如，{ line-height: 150%; }，其最終結果就是和 "font-size" 相乘后的值；
長度值：就是帶單位的值，例如 { line-height: 15px; }，{ line-height: 1.5em; } 等；
乍一看，{ line-height: 1.5; }，{ line-height: 150%; }，{ line-height: 1.5em; } 好像都是與 "font-size" 有關的計算值，但是實際上數值與另外兩個有一點不同，那就是繼承細節有所差別：如果使用數值作為 "line-height" 的屬性值，那么它的所有子元素繼承的都是這個值，如果使用百分比值或長度值作為 "line-height" 的屬性值，那么它的子元素繼承的是與 "font-size" 計算后的最終計算值。
關於 vertical-align
vertical-align 幾個常用屬性值的解釋：
"top"，將元素行內框的頂端與包含該元素的行框的頂端對齊；
"bottom"，將元素行內框的底端與包含該元素的行框的底端對齊；
"text-top"，將元素行內框的頂端與內容區的頂端對齊；
"text-bottom"，將元素行內框的底端與內容區的底端對齊；
"middle"，元素行內框的垂直中點與行框的基線往上 0.5ex 處的一點對齊；
"長度值"，相對於基線的偏移量(允許負值)；
"百分比值"，相對於基線的偏移量(允許負值)，基數就是 "line-height" 的高度；
關於內聯元素自帶的空白節點
瀏覽器等用戶代理會在所有的內聯元素的前面或者后面插入一個空白節點，稱為支柱 ( "strut" )。在這里有一個前提是文檔需要聲明 <!DOCTYPE html>，即使用 html5 版本編寫。
示例1：
<!-- html --> <div class="box"><img src="test.jpg" alt="" /></div>
//css
.box { background: lightblue; }
運行結果：(圖片的底部留有空隙)
示例2：
<!-- html --> <div class="box"><span>xxx</span></div>
//css
.box { background: lightblue; line-height: 70px; }
.box span { font-size: 20px; line-height: 30px; }
運行結果：(大部分人會認為 <span> 標簽的 "line-height" 會覆蓋繼承來的樣式，所以容器的高度應該是30px，對不對？實際上，由於這個空白節點的存在，它也是內聯元素，也能響應 "line-height" 形成高度，所以容器最終的高度為70px)
以上兩個例子用於證明空白節點確實存在，它其實是 "line-height" 和 "vertical-align" 共同作用的結果，只要消除其中任一個，就能消除空白節點的影響，比如：
將圖片設置為 { display:block; }，由於空白節點只會和內聯元素同時出現，因此將圖片設為塊級元素可避免之；
將 "line-height" 的值設置得足夠小，因為內聯元素的高度都是由 "line-height" 撐開的；
將 "vertical-align" 的值設為除 "baseline" 以外的值，例如 "top"，"middle" 等；
使用 "font-size" 間接控制 "line-height" 的大小，例如在父容器設置 { font-size: 0; }，"line-height" 也跟着變成0了；
示例3：(利用空白節點將元素垂直居中)
<!-- html --> <div class="box"><img src="test.jpg" alt="" /></div>
//css
.box { background: lightblue; line-height: 300px;font-size: 0; }
.box img { vertical-align: middle; }
運行結果：
利用空白節點響應 "line-height" 形成高度撐開父容器，設置 { font-size: 0; } 是為了避免 "ex" 的影響，此時 "中線" 和 "基線" 就位於同一條線上，即父容器的垂直中點，為圖片設置
{ vertical-align: middle; }，將它的垂直中點對齊中線，也就是父容器的垂直中點(完)。