這兩天發現一個問題，就是display為inline-block的元素有內容和沒有內容情況下高度不一致，雖然不會出現元素中沒內容的情況，但是我還是決定必須解決這個問題，可能我有一些輕微的強迫癥。

<div id="frame">

<div class="item">test</div>

<div class="item"></div>

<div class="item"></div>

</div>

.item {

display: inline-block;

width: 180px;

height: 100px;

background-color: yellow;

}

為什麽第一div會下沈？裏面隨便裝個東西就這個樣子了，為什麽？

根本原因是display: inline-block形成了內聯元素。而內聯元素的vertical-align的默認值就為baseline。

罪魁禍首就是由於baseline造成的，先來了解下baseline，這是一個在英文的文字排版中體現比較明顯的概念：

baseline只是在內聯元素中才有的概念，在塊元素中並沒有這種概念，也就是說只有在ifc下才會有這一概念，並且內聯元素的vertical-align的默認值就為baseline，也就是根據基線對齊。

對應著baseline還有兩條標準線，分別為bottom和top，下面這張圖說明了三條線所處的位置：

解決方案：

1 子元素3個inline-block中加上屬性vertical-align: middle或者vertical-align:top或者vertical-align: bottom都行

2子元素3個inline-block中加上屬性overflow：hidden

display為inline-block的元素有內容和沒有內容情況下高度不一致的問題