为什么``标签的`display: inline-block`会让父元素有高度，而`display: inline`却让父元素高度为0？

Display: inline-block 和 display: inline 对父级高度的影响

问题：

在 HTML 代码中， 标签的 display 属性设置为 inline-block 时，父元素 的高度为 30px；而设置为 inline 时，父元素的高度却为 0。这是什么原因？

分析：

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

display: inline

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

BFC 和 IFC 的影响

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

解决方法：

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

或

标签。

以上就是为什么``标签的`display: inline-block`会让父元素有高度，而`display: inline`却让父元素高度为0？的详细内容，更多请关注其它相关文章！