为何空inline-block元素会使容器产生高度，inline/block却不会？

这个问题其实涉及到CSS中**行内格式化上下文（Inline Formatting Context, IFC）**的核心规则，咱们一步步拆解：

1. 空inline-block元素的表现 #

当元素设置为display: inline-block时，它会以行内块的身份加入行盒布局：

• 哪怕元素是空的，浏览器依然会为它预留基于父容器line-height的行盒空间。
• 原因是行内块元素的默认垂直对齐方式是基线（baseline），而基线的位置和父元素的line-height直接绑定。就算没有内容，浏览器也会按照行盒的标准高度渲染，最终把父容器撑开。

比如你给父容器加个line-height: 24px，会发现容器高度刚好是24px——这就是行盒的高度。

2. 空inline元素的表现 #

对于display: inline的空元素：

• 它属于纯行内元素，CSS规范明确规定：空的行内元素不会生成有效行盒。
• 行内元素的高度完全由自身内容（文字、图片等替换元素）决定，空内容意味着没有可渲染的内容，自然不会撑开父容器的高度。

3. 空block元素的表现 #

空的display: block元素逻辑最直接：

• 块级元素的默认高度由内容高度决定，空内容的话计算高度就是0。
• 父容器的高度默认是子元素高度的总和，子元素高度为0，父容器自然也没有高度。

验证代码示例 #

.container { 
  background-color: red; 
  margin: 10px 0;
  line-height: 24px; /* 加个line-height更直观 */
}

<div class="container">
  <div style="display: inline-block;"></div> <!-- 容器会有24px高度 -->
</div>
<div class="container">
  <div style="display: inline;"></div> <!-- 容器高度为0 -->
</div>
<div class="container">
  <div style="display:block;"></div> <!-- 容器高度为0 -->
</div>

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