css - inline-block 盒子下的內容文字錯位問題

參考資料：

　　“display:block-inline形式的Span或Div中添加文字后，導致Span或Div排版掉落、錯位”的原因及解決方法；

 

正文：

　　場景：兩個 div 排在一行上，各有固定寬高，其中有一個 div 內部有文字和排版等其他填充；兩個 div 雜七雜八的寬度加起來遠小於 father 寬度。

　　拿到設計圖之后，略想了一下，這不 so easy 么，既然有足夠的寬度空間，那不就是隨意發揮么：兩 son 變 inline-block，那個有內容的 div 內或 padding ，或 flex，大致弄個上下等距不就 ok  了么，正好前面的人用 table-cell 來垂直居中，正好可以試試。然而事實證明太 naive 了，inline-block 中就藏了一個坑。

　　

　　首先是思路中的效果：

.container {
    width: 900px;
    height: 300px;
    background-color: #eee;
    margin: 100px auto;
}

.inbox {
    display: inline-block;
    width: 400px;
    height: 100px;
    background-color: #7b7f88;
}

<div class="container">
    <div class="inbox"></div>
    <div class="inbox"></div>
</div>

　　很快啊，上面沒什么問題（因為父元素的寬度足夠，兩個子元素之間的間隙可以忽略，當然這里也會出現隱藏坑，后敘）。於是很開心地去填充內容了，dom 結構變成：

<div class="container">
    <div class="inbox"></div>
    <div class="inbox">
        <div>
            <h2>55</h2>
        </div>
    </div>
</div>

 　　愉快地 ctrl + s 之后 F5，然后就懵逼了，這不對啊，怎么成這樣了，剛才不還好好的么，就加了句話？？?

 

　　於是經過翻山越嶺地 Google baidu 之后，找到了參考中的資料：css 有個屬性 vertical-align，它只在 display為 inline 或者 inline-block 的情況下起作用，默認值是 baseline。這意味着把元素設置成 inline(-block) 的時候，內部的文字會按照基線對齊，這也是為什么用尺子量，“55” 正好切了前一個 inbox 的 bottom。

　　那解決辦法就簡單了，每個 inbox 設置 vertical-aligh: top（如果父元素的高度是撐開的話，設置成middle、bottom、text-bottom、text-top 都可以），就可以回歸思路，如下圖：

 

其他：

　　在第一張圖我們也看到， inline-block 的盒子之間是存在一點間隙的，這個問題和 HTML 的結構有關。正如上面我們貼的代碼，兩個 inbox 之間有一個換行，而瀏覽器在解釋的時候遇到 inline(-block) 會把這個換行符解釋成一個空白文本節點，這在視覺上就出現了間隙。解決辦法有很多，貼兩個常見的：

　　1. 代碼寫一行上，不過不利於維護；

　　2.父元素設置 font-size: 0，子元素重新設置字體大小；

各有優缺點，按需取用。