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

从现在开始，我们要努力学习啦！今天我给大家带来《为什么设置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则不会？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！