爲什麼inline-block div在內容上位置較低？

Question

如果您有三個相同的div位於內嵌塊中，則它們完美對齊。但是，如果您將任何內容放入任何div，則會下降到其他區域之下。它爲什麼這樣做？

<div class="left">?</div> 
<div class="center"></div> 
<div class="right"></div> 

div { 
    display:inline-block; 
    margin-:2px; 
    height:100px; 
    width:25px; 
    border:1px solid black; 
}​ 

http://jsfiddle.net/7kkC6/

更好的例子：http://jsfiddle.net/7kkC6/9/

Answer 1

這是它的工作原理，因爲垂直對齊的默認設置到基線。 您可以通過設置它解決您的問題頂部：

div { 
    display:inline-block; 
    margin-:2px; 
    height:100px; 
    width:25px; 
    border:1px solid black; 
    vertical-align: top; 
}​ 

這裏的演示：http://jsfiddle.net/7kkC6/4/

Answer 2

如果你改變display到block並添加float:left;

Working example.

Answer 3

要理解你可以閱讀的事實Collapsing Margins Between Adjacent Elements和another on SO，但你可以通過添加float:left;修復它，希望你已經我知道。

Fixed Example。