为什么 `` 里面包含 `` 设置 `line-height: 0` 时，`div` 的高度不为 0？

本篇文章给大家分享《为什么 `` 里面包含 `` 设置 `line-height: 0` 时，`div` 的高度不为 0？ 》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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。

现象差异原因：

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

好了，本文到此结束，带大家了解了《为什么 `` 里面包含 `` 设置 `line-height: 0` 时，`div` 的高度不为 0？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！