Why does adding text to a span change its position?

Question

See this fiddle. When I take out the text, the spans line up next to each other nicely. When I add text to one, it appears lower in the page.

<div>
    <span id="first">
    </span>
    <span id="second">
        Text
    </span>
</div>

span#first {
    display:inline-block;
    width: 100px;
    height: 100px;
    background-color: red;    
}

span#second {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;   
}

Answer 1

The default value of vertical-align is baseline. The CSS spec says that for vertical-align: baseline

Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

An empty block has no baseline, so the bottom of the span lines up with the baseline of the parent div. The next span, since it has text (and therefore a baseline), lines up the text with the baseline of the div.

If you set vertical-align: top on both span elements, they should line up correctly.