今天在做頁面時發現一個很奇怪的問題：當兩個設置了display: inline-block; 屬性的元素並列排放時，它們的位置能夠互相影響。
我們先來看看元素結構：
<div class="container"> <div class="container-demo1"> <span>1</span> </div> <div class="container-demo2"> <!-- <span>2</span> --> </div> <div class="container-demo3"> <span>3</span> </div> </div>
我們使三個div都設置為 inline-block，設置寬度使其居於一行內。如果再把 container-demo2 中的內容注釋掉，我們可以看到一種十分詭異的情況，如圖。
可以發現本該位於父容器頂端的demo1和demo3居然沉了下去，而沒有內容的demo2還在正常位置上。這時候就會想：肯定是元素的內容造成了這種結果。那么我們現在給demo2加上內容看看效果：
可以看到三個元素都回到了我們想讓它呈現的位置。那為什么inline-block元素的位置會受到其內容的影響呢？我們可以查到這樣一句話：inline-block元素可以將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。
有了這樣的屬性，我們就可以在表現上將對象用作內斂元素但又可以對它進行寬高設置。但有一點需要注意的是對象仍然呈遞為內聯元素，而同一行內的內聯元素默認是基於 baseline 對齊的，我們可以在1圖中標記出來：
即圖中的藍色線條，具體的我們可以去查看W3C的 vertical-align 屬性。好的，基於基線對齊的模式我們有了理解，但還有一個問題：為什么3個元素的方向不是相同的呢？為什么有內容的元素向下，而無內容的元素會向上呢？就此我們需要了解CSS渲染機制：對於一個inline-block元素，如果內部沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是它margin的底邊緣，否則就是元素內部最后一行內聯元素的基線。
簡單地就以上這種情況來說，沒有內容的demo2會基於它的margin底邊緣也就是它的下邊緣對齊，而包含內容的demo1和demo3會基於其內部內聯元素的基線對齊，所以會造成這種一上一下的情況。
對此我們有多種解決辦法：
1、暴力float，當然這是備選方案，畢竟脫離文檔流后頁面元素會不好控制
2、簡單粗暴地給所有元素都加上內容，例如空格符
3、設置所有內聯元素 vertical-align: top/middle/bottom; 屬性，改變默認設置