为什么这两个相同的内联div在一个有文本而另一个没有文本时未对齐？

Question

所以这里有两个相同的div：

HTML

<div id="left"></div>
<div id="right"></div>

CSS

#left, #right
{
    width: 100px;
    height: 40px;
    border: 1px solid gray;
    display: inline-block;
}

这些渲染得很好，就像两个相同的盒子并排（小提琴：http://jsfiddle.net/URy59/）。

但是在一个div中有文本，而在另一个div中没有​​，他们没有对齐！ （小提琴：http://jsfiddle.net/URy59/1/）

此...

<div id="left"></div>
<div id="right">Right</div>

...导致：

此行为也可以使用<span>重现。

是什么导致这种情况，为什么？对此有什么好的解决方案？

Answer 1

简短回答：将vertical-align属性设置为top。

答案越长：内联元素default vertical alignment is baseline。当你的div没有内容时，他们排队很好。但是，当您添加文本时，浏览器会向下移动div，以便文本位于基线上：

通过将对齐方式更改为顶部，可以根据需要对齐div。

<强> jsFiddle example

Answer 2

您需要垂直对齐元素：

#left, #right {
    ...
    vertical-align: top;
}

JSFiddle demo