为什么 `display: inline-block` 在隐藏的 Div 上方创建一个间隙？

为什么 Inline-Block 会为隐藏的 Div 添加高度

在

上使用 display: inline-block 时元素，当包含元素被隐藏时，可能会在元素上方遇到意外的间隙。使用 display: block 不会发生此行为。

为什么会发生这种情况？

display: inline-block 更改行高计算。在内联格式化上下文中，内联块元素的高度基于其“line-height”属性。对于空的内联块元素，这会转换为它们的基本行高，即使它们没有可见的内容。

间隙背后的原因

因此，一个空的inline-block 根据其继承的行高（通常来自

）保留最小行空间。元素。当其容器不可见时，此保留空间表现为元素上方的间隙。

快速修复

要消除此间隙，一个快速解决方案是包装内联-block 包装器中的元素显式设置 font-size: 0。这确保没有字体和行高，从而导致空的内联块没有高度。

更新

官方文档中没有明确定义空内联块元素的高度。不过，根据测试，可以这样理解：

• 空空间：内联块元素为潜在内容保留一个行框。
• 继承的行高：这个行框是基于从父元素继承的行高，包括;元素。
• 最小行距： 尽管空内联块在技术上不存在用于格式化目的，但它们仍然保留最小行距。

以上是为什么 `display: inline-block` 在隐藏的 Div 上方创建一个间隙？的详细内容。更多信息请关注PHP中文网其他相关文章！