Why element has various height depending on whether it has content or not

Question

I am curious to know why following elements have various heights:

<i class="icon"></i>
<i class="noicon"></i>

i {
    display: inline-block;
    width: 1em;
    height: 1em;
}

i.icon:before   { content: 'Ω'; }
i.noicon:before { content: '';  }

That case may be illustrated by http://jsfiddle.net/pJw9d/ (hover the symbols with pointer to view the difference in sizes).

---

PS: I know how to fix such problem (e.g., by using non-breaking space (  or \00a0), or by defining CSS positions), but I would like to know why it behaves that way.

Answer 1

As @anddoutoi correctly pointed, that behavior is explained in W3C Recommendations:

If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

That fiddle demonstrates, that it is not that empty element's size increases, but that it is risen for the baseline height.

---

Such jumps can be avoided either

• by replacing the empty content with non-breaking space, e.g.:

    i.noicon:before { content: '\00a0'; }

• or by defining the vertical-align property.