标签导航:
的高度为 30px;而设置为 inline 时,父元素的高度却为 0。这是什么原因?

分析:

对于 display: inline-block,每个行框盒子都有一个零宽度、带字体和行高的内框,称为“支柱”。因此,父元素的高度等于行高(30px)。

display: inline

对于 display: inline,行框盒子不会被创建。这是因为 inline 元素与文本流内联,不会形成块级元素。因此,父元素的高度不受行框盒子影响,默认为 0。

BFC 和 IFC 的影响

需要注意的是,inline-block 元素会创建包含区域(BFC),而 inline 元素不会创建隔离格式化上下文(IFC)。只有 BFC 才会有高度。

解决方法:

如果需要 inline 元素也有高度,可以将其包裹在其他创建 BFC 的元素中,例如

标签。