为什么设置span元素的display属性为inline-block会影响父级元素的高度，而设置为inline则不会？

Span的Display属性如何影响父级元素高度？

当设置span元素的display属性为inline-block时，其父级元素的高度为30px，而当设置display属性为inline时，父级元素的高度变为0。

原因：

不同display属性会创建不同的格式化上下文（Formatting Context，FC）：

• inline-block创建一个块格式化上下文（BFC），它定义了元素独立的布局和垂直边距折叠。因此，BFC内元素间不会相互重叠，而父级元素高度受子元素内容的高度影响，即30px。
• inline创建一个内联格式化上下文（IFC），它阻止元素创建BFC。因此，元素不会影响父级元素高度，并且父级元素高度为0。

需要注意的是，在IFC中，元素不会创建零宽度支柱或设置行高。因此，即使设置了行高，span元素在display为inline时也不会有高度。

其他：

对于进一步的理解，可以参考以下资源：

• 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

以上就是为什么设置span元素的display属性为inline-block会影响父级元素的高度，而设置为inline则不会？的详细内容，更多请关注其它相关文章！