不得不說display:inline-block;是乙個強大的css屬性，它解決了很多float浮動布局的不足，讓頁面布局更隨意、富有彈性。但這個改變了元素型別的屬性也存在著很多容易讓人忽視的小問題，如之前我有寫過的《li標籤間有空白是怎麼回事? 消除li橫排後空隙》，我們姑且稱之為「bug」吧（實則不然），只有我們掌握了這些問題的解決辦法，才能更加熟練的使用這一布局神器。
筆者這次遇到的乙個問題場景是元素設定為display:inline-block;後，部分元素出現了上浮，無法與其他同行元素水平對齊。
部分**如下：
classcss部分="wrap"
>
class
="a"
>
iyaxi.com
class
="a"
>
雅兮網class
="a"
>
iyaxi.com
class
="a"
>
雅兮網
可以看到，我們製作的這個小demo，預期是將四個設定為塊狀行內元素，讓他們水平對齊以達到如下圖效果。
當四個塊狀元素內都寫有文字的時候，實現了預期的效果；但當其中乙個塊狀元素無內容填充時，出現了異常，該空白元素出現了上浮，導致整個頁面變得參差不齊了，如下圖，為什麼會這樣呢？
重點來了（敲黑板！！！）行內元素和替換元素（如等）會有乙個叫做基線（baseline）的玩意，他的位置位於文字框的底部，即文字的最底端；當塊狀行內元素無文字填充的時候，它的基線就會自動移至元素的最底端；同時，以及其他非替換元素的基線也為元素的最底端。
總結起來就是，行內元素和替換元素的基線位於文字框的底端，無文字的塊狀行內元素、和非替換元素的基線就是元素的最底端。大家橫向對齊的參照物預設就是這個基線（baseline）
所以上面的問題就很好理解了，空白的塊狀行內元素基線預設為元素底端，其他幾個元素的基線位於文字的底部，大家都參照基線進行了對齊。看似參差不齊，其實上還是對齊的，如下圖。
你也可以直接檢視demo
那麼又延伸出另外的乙個情況，當各元素之間的文字字型大小或者文字長度不一致時，基線的位置也會發生改變，頁面會呈現更加的「混亂」狀態，但實際上還是參照基線對齊的。如下圖，
你也可以直接檢視demo
下面就是解決辦法：既然頁面的混亂是因為「基線對齊」導致的，那只需要設定元素的垂直對齊不參照基線即可，引入vertical-align屬性，設定元素的垂直對齊方式。
本例中，由於各元素高度相同，top、middle、bottom任選其一就可實現對齊。
將 vertical-align:top; 加入 .a{}樣式即可，
你也可以直接檢視demo
去除inline block元素間距
現象 當使用inline block的時候，元素間會出現4px的間距 在chrome裡面 是8px 如下圖 原因 元素間留白間距出現的原因就是標籤段之間的空格 解決方法一 既然間距是因為標籤間的空格造成的，那麼消除空格就可以消除間距，但是這一類方法都不符合常規的 書寫習慣，所以 不推薦春天 夏天秋天...
去掉inline block元素間隙
目錄 1 標籤寫在一行，移除標籤間的空格 2 利用html注釋標籤 3 在父容器上使用font size 0 可以消除間隙 做頁面時，如果用到inline block元素來布局，就無可避免都會遇到乙個問題，就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題，需要把間隙去掉。我...
inline block元素間隙處理
要使多個塊級元素並行顯示，可使用float或者inline block進行處理 使用inline block會出現元素之間的間隙 div class demo p 我是乙個span p p 我是乙個span p p 我是乙個span p p 我是乙個span p div demo span 如圖 間...