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

今天golang学习网给大家带来了《为什么``标签的`display: inline-block`会让父元素有高度，而`display: inline`却让父元素高度为0？》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

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

问题：

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

分析：

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

display: inline

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

BFC 和 IFC 的影响

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

解决方法：

如果需要 inline 元素也有高度，可以将其包裹在其他创建 BFC 的元素中，例如 <div> 或 <p> 标签。

好了，本文到此结束，带大家了解了《为什么``标签的`display: inline-block`会让父元素有高度，而`display: inline`却让父元素高度为0？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！