inline-block致使的錯位問題詳解

如圖：想要讓黃、紅兩個盒子水平排列，方法有不少，有position定位，float浮動，實在不行還有彈性盒display：flex；還有一種方法就是display：inline-block；將其變成行內塊元素，即可以水平排列，可是問題就出如今了這裏，當咱們設置display：inline-block；後會出現第二幅圖的狀況

出現這種錯位的緣由，實際上是由於咱們編寫css所使用的編輯器，給每個元素都添加了一個默認的vertical-align:baseline;屬性； baseline是基線對齊的意思，基線即咱們所寫的文本文檔的最後一行文字的底線，好比黃色盒子的基線就是「會有期」這三個字的底線，而紅盒子的基線就是「爲恥」這兩個字的底線，從圖中咱們能夠很明顯的看到，這兩條線是對齊了的，這就是致使錯位的緣由。

要解決這個問題其實也很簡單，只須要將vertical-align的值改成top、middle等其餘的值就能夠了。