Difference between baseline of empty and non-empty inline blocks

Question

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #aef;
    vertical-align: baseline;
}

base <div>×</div> <div></div> line

The empty inline block is aligned differently from the one containing text. This can be fixed by specifying a different vertical-align value, but I wonder why this is happening. Can you point to a relevant part of CSS specification?

Answer 1

From CSS2: Line height calculations

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.