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，子元素從新設置字體大小；

各有優缺點，按需取用。