Why are these two identical inline divs misaligned when one has text and the other doesn't?

Question

So here are two identical divs:

HTML

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

CSS

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

These render just fine, as two identical boxes side-by-side (fiddle: http://jsfiddle.net/URy59/).

But with text in one div, and none in the other, they're misaligned! (fiddle: http://jsfiddle.net/URy59/1/)

This...

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

...results in:

This behaviour is reproducible using <span> as well.

What causes this, and why? What's a good solution to this?

Answer 1

The short answer: set the vertical-align property to top.

The longer answer: An inline element's default vertical alignment is baseline. When your divs have no content, they line up fine. However when you added the text, the browser then will move the div downward so that the text sits on the baseline:

By changing the alignment to top, you align the divs the way you need.

jsFiddle example

Answer 2

You need to vertically align your elements:

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

JSFiddle demo.