为什么设置 span 元素的 display 属性为 inline-block 会影响父元素

的高度？

免费电影APP ➜

的高度？ 》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

的高度？ " />

内联元素对父元素高度的影响：inline-block 与 inline

在下面的 html 代码段中：

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

• 如果将 span 元素的 display 属性设置为 inline-block，父元素
  的高度会变为 30px。
• 如果将 span 元素的 display 属性设置为 inline，父元素
  的高度则会变为 0。

这是为什么？

inline-block

当 display 属性设置为 inline-block 时，span 元素会成为一个块级元素，它具有固定的高度和宽度，由元素的内容决定。块级元素会创建自己的行框盒子，因此父元素