为什么空的内联块 Div 有高度？

为什么 Inline-Block 为空 Div 设置高度

当空 div 元素被分配显示属性“inline-block”时，它意外地表现出高度增加，这种现象在“display:block”中不会发生。这种看似矛盾的行为源于内联块格式的固有特征。

内联块中的行高计算

将元素设置为内联块后，行高计算发生了转变。内联块不是对齐文本的底部，而是对齐底部、顶部或两者。

空内联块的行高

对于空内联块元素，行高计算源自与元素关联的字体规格。但是，由于没有文本内容，这会导致元素根据从其父元素（通常是正文）继承的字体大小假定基本行高。

修复空内联-块高度

为了消除由继承的行高引起的不需要的高度，可以使用一个包装元素，将字体大小显式设置为 0，从而有效地取消任何行高计算：

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
}

更新：空内联块的高度

需要注意的是，空内联块元素的高度没有官方文档。然而，观察揭示了一种模式。

最小行距保留

无论是否有内容，内联块元素似乎都会保留最小行距。此空间基于从父元素继承的行高。

含义

此行为表明 inline-block 本质上期望内容并保留默认行空间为了它，即使它是空的。虽然这与零高度空行框的 W3 规范相矛盾，但这是内联块格式特有的一个怪癖。

以上是为什么空的内联块 Div 有高度？的详细内容。更多信息请关注PHP中文网其他相关文章！