为何含空inline-block元素的div有高度，含空inline元素的div高度为0？

先看你的代码示例：

CSS 代码：

div { background:red; }

HTML 代码：

<div><span style="display: inline"></span></div>

结合你引用的 W3C 规范：

W3C规定：在内容由inline级元素构成的块容器元素上，'line-height'指定了元素内行框的最小高度。该最小高度包含基线以上的最小高度与基线以下的最小深度，就如同每个行框都以一个具备元素字体和行高属性的零宽度inline框起始一般。我们将这个假想框称为"strut"（名称灵感源于TeX）。

核心原因分析 #

你看到 div 高度为 0，本质是行框的最小高度被压缩到了0，主要有两种常见场景：

• div 的 font-size 被设为 0
  strut 是继承了 div 字体和行高属性的假想框，它的高度由 font-size 和 line-height 共同决定。如果 div（或其继承的父元素）的 font-size 被显式/隐式设置为 0，那 strut 的高度会直接变成 0。此时内部的空 span 本身也不会贡献任何高度，行框的最小高度就是 0，div 自然没有高度。

• 浏览器对空 inline 元素的特殊处理
  部分浏览器在遇到内部仅包含无内容、无尺寸的 inline 元素时，会忽略 strut 的存在，直接将行框高度计算为 0。这种行为虽然看似和规范有出入，但属于实际场景下的兼容处理——因为空 inline 元素本身没有任何视觉意义，浏览器会默认认为不需要保留行框高度。

验证方法 #

如果给 div 添加一行样式 font-size: 16px; line-height: 1.2;，你会发现 div 立刻出现了高度，这就是 strut 发挥了作用，行框的最小高度由字体和行高计算得出。

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