为什么空的内联块 div 在隐藏容器内会增加高度？

使用 inline-block 时，隐藏容器内的空内联 div 元素会奇怪地获得高度。与 display:block 的行为相反，为什么会发生这种情况？

Display:inline-block 在元素上赋予特定的格式：

• 内联级格式：元素被放置在容器块内水平向外。
• 行高计算：行内元素的行高计算方式不同。对于内联块元素，它成为边距框的高度。对于普通的内联元素，它是 'line-height' 属性。

当 inline-block 元素为空时，即使没有字体或文本内容，它也会采用其基本行高。这会导致元素获得较小但明显的高度，尽管处于空状态。

防止此高度问题的解决方法是使用 font-size:0 的包装器来消除行高计算：

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

更新：了解内联块高度

与最初的假设相反，空内联块元素的确切高度没有正式记录。然而，观察和测试表明：

• 内联块根据继承的行高保留最小行空间，通常由 确定。元素。
• 即使内联块为空，该行空间仍然存在，并且理论上根据 CSS 规范应将其视为零高度。

以上是为什么空的内联块 div 在隐藏容器内会增加高度？的详细内容。更多信息请关注PHP中文网其他相关文章！