關於CSS：inline vertical-align

前言

關於vertical-align表示內聯元素相對於父元素的對齊方式。 先上結論：

1. ‘inline-block’的基線是正常流中最後一個line box的基線, 除非，這個line box裏面既沒有line boxes或者自己’overflow’屬性的計算值而不是’visible’, 這種狀況下基線是margin底邊緣。
2. 在內聯元素中存在一個空白節點，能夠看做透明的沒有寬度的節點，它在影響着vertical-align的做用方式

正文

關於第一點十分容易確認：

<div class="wrap-2">
      <span class="baseline first"></span>
      <span class="baseline second">xxx</span>x
</div>
複製代碼

結果應該是：

英文字母'x'的底端即爲基線baseline，表現爲底端對齊了左邊盒子的底部，說明左邊盒子的baseline爲底部。

關於第二點比較不容易看明白，先來看看將右邊盒子的vertical-align設置爲bottom：

這裏比較費解的一點就是，左邊盒子並無元素，那其底部不是應該同爲底部？爲何右邊對齊的時候將右邊盒子的底部往下移了？

其實就是第二點，有個空白節點在這裏，咱們將兩個盒子中間插入字符'x'後就至關於把那個空白節點替換成了'x'以便觀察。

<div class="wrap-2">
      <span class="baseline first"></span>
      <span class='help'>x123x</span> 
      <span class="baseline second">xxx</span>
 </div>
複製代碼

結果：

這樣就能夠看見了，其實那個節點存在了高度所以撐高了父元素的高度，使父元素高度比盒子要高一些，所以對齊方式就存在了與預期效果的差別。

而消除該差別的辦法也不少：即將該節點的高度變沒，或者變得足夠小。 若是父元素爲inline元素只須要將line-height爲0，若是使block則能夠將font-size爲0，便可解決。

上述解決辦法的原理和元素高度如何而來有關，參考前面的：關於CSS：line-height。

結尾

上班太閒了，就本身學點東西。CSS實在是太深奧了，語法簡單卻又難以理解。加油吧。