div高度解析

有人质疑以下代码中DIV高度的呈现：

<div>
  <span style="font-size: 1em; line-height: 0;">line</span>
</div>

通常情况下，span 的行高设为0时，所在行的行框高度也变为0，因而DIV高度会跟着变为0。然而，实际呈现中，DIV高度却为27。

解释：

行框是由内部行内框组成的。这里，span生成一个行内框，高度为0。此外，还有一个无法看到的匿名行内框，可继承DIV的line-height。当DIV的line-height为0时，匿名行内框高度也为0。

DIV之所以有高度，是因为这两个行内框的垂直位置不同。span的行内框位于字体中间偏下，而匿名行内框位于距离默认字体大小16px一半左右的位置。当font-size设为0时，匿名行内框会尽可能接近底部，DIV高度会增加约6px。

当两个font-size相同时，这两个行内框的垂直位置一致，导致行框高度为0。

现象差异原因：

如果省略声明，DIV高度变为0。这是因为省略声明会导致浏览器使用quirks模式，在quirks模式下，span的行内框高度会强制为字体大小（16px），导致行框高度非0，DIV也会有高度。