一、為什么要寫這篇文章

今天看到一個問題：

兩個div 都設(shè)置 display：inline-block，正常顯示；但是在第二個div中加一個塊級元素或者內(nèi)聯(lián)元素，顯示就變了個樣，為什么？

解決方案就是給第二個div加上：vertical-align:top。

關(guān)于vertical-align和基線我知道一點，但是這個問題我沒能答出，所以學(xué)習(xí)總結(jié)分享一下。

二、vertical-align干什么的？

w3c有一段相關(guān)信息如下：

可以看到vertical-align影響inline-level元素和table-cell元素垂直方向上的布局。根據(jù)MDN描述，vertical-align對::first-letter和::first-line同樣適用。

適用于：

inline水平的元素  

inline:<img>,<span>,<strong>,<em>,未知元素  

inline-block:<input>(IE8+),<button><IE8+>....

'table-cell'元素

table-cell:<td>

所以默認情況下，圖片，按鈕，文字和單元格都可以用vertical-align屬性。

取值：

三、baseline

1、字母‘x’與baseline

 字母x的下邊緣（線）就是基線。不是字母s之類下面有尾巴的字母

基線甚至衍生出了：  

1.“alphabetic” baseline: “字母”基線 – 英文  

2.“hanging” baseline: “懸掛”基線 – 印度文  

3.“ideographic” baseline: “表意”基線 – 中文

2、baseline的確定規(guī)則

1、inline-table元素的baseline是它的table第一行的baseline。