Why does an inline-block div get positioned lower

Question

This question already has answers here:

Why does this inline-block element have content that is not vertically aligned (4 answers)

Closed 5 years ago.

If you have three identical divs positioned inline-block they are aligned perfectly. But if you put any content in any of the divs it drops down below the others. Why does it do that?

<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/

better example: http://jsfiddle.net/7kkC6/9/

Answer 1

This is because vertical-align is by default set to baseline. You can fix your problem by setting it to top :

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

The demo here : http://jsfiddle.net/7kkC6/4/