空inline与inline-block元素的line box差异及容器高度疑问

嘿，这个细节确实容易踩坑，我来帮你理清楚其中的门道～

一、空inline元素：完全塌陷，无line box生成 #

当你使用空的inline元素（比如<span></span>）时，它确实不会触发line box的创建，容器高度会直接塌陷为0。原因很简单：inline元素的核心是承载文本或其他inline内容，当它完全为空时，没有任何需要渲染的内容，自然也就不需要生成line box来容纳它，容器的高度自然就变成0了。

二、空inline-block元素：会生成line box，容器有正高度 #

这就是你困惑的核心点了！空的inline-block元素哪怕内部啥都没有，也会生成一个line box，而且容器的高度等于该元素（或继承自父元素）的line-height值。

为啥会这样？因为inline-block本质是一个能参与inline布局的块级容器——哪怕它内部没有内容，它自身作为一个inline-level盒子，会被浏览器当作一个需要被容纳的“占位单元”，强制触发line box的生成。而且inline-block的高度计算规则里，当没有显式设置height且内部无流内容时，它的高度由内部的“strut”（一个看不见的空白占位字符）决定，这个strut会继承父元素的line-height，所以最终容器的高度就等于这个line-height的值。

举个直观的代码例子：

.container {
  background: #f0f0f0;
  line-height: 24px; /* 父元素的行高 */
}
.empty-ib {
  display: inline-block;
  /* 没有设置height，也没有内容 */
}

<div class="container">
  <div class="empty-ib"></div>
</div>

这个.container的高度会是24px，和父元素的line-height一致。如果给.empty-ib设置line-height: 0，容器高度就会直接变成0，完美验证了这个逻辑。

核心差异总结 #

• 空inline元素：无内容 → 不触发line box → 容器高度0
• 空inline-block元素：作为inline级块容器，自身占位触发line box → 高度由line-height（内部strut）决定 → 容器有正高度

内容的提问来源于stack exchange，提问作者ladjzero