inline block導致的錯位問題詳解

如圖：想要讓黃、紅兩個盒子水平排列，方法有很多，有position定位，float浮動，實在不行還有彈性盒display：flex；還有一種方法就是display：inline-block；將其變成行內塊元素，便可以水平排列，但是問題就出現在了這裡，當我們設定display：inline-block；後會出現下圖的情況

出現這種錯位的原因，其實是因為我們編寫css所使用的編輯器，給每乙個元素都新增了乙個預設的vertical-align:baseline;屬性；baseline是基線對齊的意思，基線即我們所寫的文字文件的最後一行文字的底線，比如黃色盒子的基線就是「會有期」這三個字的底線，而紅盒子的基線就是「為恥」這兩個字的底線，從圖中我們可以很明顯的看到，這兩條線是對齊了的，這就是導致錯位的原因。

要解決這個問題其實也很簡單，只需要將vertical-align的值改為top、middle等其他的值就可以了。