css - コンテンツの有無によって要素の高さが異なる理由

Question

次の要素の高さが異なる理由を知りたいです。

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

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

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

その場合は、http://jsfiddle.net/pJw9d/で説明できます(サイズの違いを表示するには、ポインターでシンボルをホバーします)。

---

PS: 私はそのような問題を解決する方法を知っています (たとえば、改行しないスペース ( または\00a0) を使用するか、CSS の位​​置を定義することによって)、なぜそのように動作するのか知りたいです。