[toc] ## %  ## 清楚間隙  ## 大小不固定圖片的垂直居中  ## 基線與inline-block  ### 栗子 1.1  如果將inline-block里的行高設置為0 1.2  (右邊的框框又下移了一點，因為行高變為0，文字content-area的中心和框框上邊緣重合（文字不再占據高度），基線也隨之上移) ### 復雜栗子   將line-height設置為0后，發現依然存在間隙  這是因為i成為了inline-block元素，并且是個空元素，它的基線就為它的margin下邊緣 需要和行框盒子的幽靈空白節點的基線對齊，又由于這個行框盒子被設置了line-height:0，參考1.2，此時幽靈空白節點如下  那么i盒子和幽靈空白節點對齊，就會照成如上間隙（雖然幽靈空白節點不占據空間，i是要占據的，so會造成間隙） 我們可以選擇vertical-align:top/bottom清楚， 或則在i里放一個字符（這樣i這個inline-block盒子的基線就是這個字符的基線，）又由于line-height為0，故就能和幽靈空白節點基線對齊又不生成多余的間隙（因為line-height為0時，字符不占據空間）