Inline-block elements and vertical-align reasoning

Question

I have 2 div boxes next to each other using display: inline-block.

Without content both inline-block divs are vertically aligned to top.

If both have content they also vertically align to top.

If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top.

If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.

Please see jsfiddle link below

Why did the creators do this instead of always aligning them to top? Is there a deeper reason behind this?

Answer 1

UPDATE:

In your example just add:

.content_boxes{
    width: 400px;
    height: 200px;
    background: lightgreen;
    display: inline-block;
    vertical-align:top;
}

Fiddle:

http://jsfiddle.net/genwQ/1/

You have to set vertical-align:top; to each element is display:inline-block;. Careful not to confuse: it is the element, NOT the parent.

Example:

ul li {
    display:inline-block;
    vertical-align:top;
}

Demo:

http://jsfiddle.net/X3RLB/

Realize that an unwanted space appears between your inline-block elements. This space CANNOT be removed with the margin:0px; property. To remove them you must add a comment tag between inline-block the elements.

Example:

<div id="content_cnt">
    <div class="content_boxes"></div><!--
    --><div class="content_boxes">dsasda</div>
</div>

Fiddle:

http://jsfiddle.net/genwQ/2/