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

wufei123 2025-01-26 阅读:23 评论:0

div高度解析有人质疑以下代码中DIV高度的呈现：<div> <span style="font-size: 1em; line-height: 0;">line</span>...

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

div高度解析

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

PHP

<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也会有高度。

以上就是为什么 `` 里面包含 `` 设置 `line-height: 0` 时，`div` 的高度不为 0？的详细内容，更多请关注知识资源分享宝库其它相关文章！

本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com