为什么内联块div在有内容时会降低位置？

Question

如果你有三个相同的div位于内联块，它们完全对齐。但是如果你在任何一个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

这是因为vertical-align默认设置为baseline。 您可以通过将问题设置为顶部来解决问题：

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

此处的演示：http://jsfiddle.net/7kkC6/4/