CSS 中，嵌套元素的 display 属性对父元素高度的影响是什么？

css 中，嵌套元素的 display 属性对父元素高度的影响是什么？

嵌套元素对父元素高度的影响

在 css 中，span 元素的 display 属性可以设为 inline-block 或 inline，这会影响其父元素的高度。以下是一段代码示例：

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

原因

原因在于块级格式化上下文 (bfc) 和内联格式化上下文 (ifc) 的区别。

当 span 的 display 为 inline-block 时，它会创建自己的 bfc，并且不会影响其父元素的高度。
当 span 的 display 为 inline 时，它不会创建 bfc，并且会被视为其父元素内容的一部分。由于 div 没有任何其他内容，所以其高度为 0。

参考

[why empty display inline block element create height but display inline and display block not?](https://stackoverflow.com/questions/15428710/why-empty-display-inline-block-element-create-height-but-display-inline-and-displa)
[how to determine height of content-box of a block and inline element](https://stackoverflow.com/questions/14371045/html-how-to-determine-height-of-content-box-of-a-block-and-inline-element)

以上就是CSS 中，嵌套元素的 display 属性对父元素高度的影响是什么？的详细内容，更多请关注其它相关文章！