Why does adding text to a span change its position?
css, html
Solution
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.
Problem
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; } ```