javascript - 求指导：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

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>

Answer 2

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

在CSS中，inline和inline-block是两种不同的显示模式，它们对元素的高度和宽度有不同的影响。

当你将一个元素设置为inline，这个元素将作为行内元素显示。行内元素不会独占一行，而是与其他行内元素在同一行内显示。它们不会像块级元素那样自动扩展以填充其父元素的宽度，而是只占据它们内容所需的宽度。对于高度，行内元素的高度通常只取决于其内容的高度，除非你明确设置了高度属性。因此，在你的例子中，如果span的display设置为inline，并且没有设置高度属性，那么div的高度将为0，因为行内元素不会增加父元素的高度。

另一方面，当你将一个元素设置为inline-block时，这个元素会作为行内块级元素显示。行内块级元素可以设置宽度和高度，并且像块级元素一样显示，但它们仍然与其他行内元素在同一行内显示。因此，如果span的display设置为inline-block，并且你设置了高度属性（如30px），那么这个高度将应用到span上，并因此影响到其父元素（即div）的高度。

至于你提到的行框盒子和幽灵空白节点，这些都是CSS布局中的概念。行框盒子是用于描述行内元素的布局和盒模型的抽象概念。幽灵空白节点是用来处理行内元素的垂直外边距的。这些概念有助于理解为什么不同的显示模式会对元素的高度产生不同的影响。