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

Question

 <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， 但是这个解释我没有理解
   

Answer 1

因为 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>

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

• Why Empty Display Inline Block Element Create Height But Display Inline and Display Block not? - Stack Overflow
• html - How to determine height of content-box of a block and inline element - Stack Overflow

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

Answer 2

Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline
blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

• no text
• no preserved white space
• no inline elements with non-zero margins, padding, or borders
• no other in-flow content(such as images, inline blocks or inline tables
• do not end with a preserverd newline

=>

• for the purposes of determining the positions of any elements inside of them, must be treated as zero-height line boxes
• for any other purpose, must be treated as not existing

我觉的这段话说的挺明白了，而且最关键的应该就是它了。

• display: inline时这个line-box是不存在（此时它满足上面所有的条件），故也就没有什么strut了。如果给它加上不为0的margin、padding或者borders的时候，这时候上面的条件3就不成立了，故line-box存在，此时div大小就不为0了。
• display: inline-blocks时，上面的条件4就不成立了，故line-box存在，又由于strut，此时div大小不为0。

附:
这里不需要显示设置line-height。

 <div style="line-height: 30px;">
      <span></span>
  </div>