求指导：span的display为inline-block 和inline的时候对父级元素高度的影响?

作者站长头像
站长
· 阅读数 7
 <div style="line-height: 30px;">
      <span></span>
  </div>

这样一段代码 ，如果设置 span的display为inline-block 则div的高度为30px；如果设置span的display为inline 则div的高度为0.

请问这是什么原因？

我的思路： 我知道行框盒子 和 幽灵空白节点。 对于display为inline-block 我能理解div的高度为什么是30px。每个行框盒子都以一个零宽度，带有元素字体以及行高属性的内框开始，我们称这个假想的盒子为'支柱'那么为什么display为inline的时候 div的高度是0呢？ 难道此时就没有行框盒子吗？

参考：

  1. https://blog.csdn.net/userkang/article/details/105161683 这篇文中中提到了 为什么inline的时候高度为0， 但是这个解释我没有理解 求指导：span的display为inline-block 和inline的时候对父级元素高度的影响?
回复
1个回答
avatar
test
2024-06-23

因为 BFC 和 IFC 的不同。比如说以下的例子中，只有包裹 inline-block 的 .container 容器会有高度。

<div class="container">
  <div style="display: inline-block;"></div>
</div>
<div class="container">
  <div style="display: inline;"></div>
</div>
<div class="container">
  <dis style="display: block;"></dis>
</div>

<style>
.container {
  background-color: red;
}
</style>

理解起来会很费劲，具体得解释可以查看以下两个问题：

其他[css-display] Should 'run-in flow-root' blockify to 'block' or 'flow-root'? · Issue #1715 · w3c/csswg-drafts

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容