inline-block元素下移問題的分析及解決

不知道大家有沒有遇到過這種蛋疼的情況，當你排列了三個 display 屬性為inline-block的 div 時。

我們在其中一個div中輸入文字，就會出現如下這種現象，設定文字 div 的佈局變化了。

問題定位

為什麼會出現這種情況呢？我們開啟控制檯檢視一下元素佈局，如下圖我們能看到第二個 div 的排列方式以文字底部為基準了。

問題解決

vertical-align 屬性相關，那麼要實現我們要呈現的頂部對其效果，則設定為top即可。

vertical-align: top;