span内小字号文本导致行高异常的原因咨询

问题复现代码 #

CSS代码：

* {
  all: unset;
  display: revert;
}
p {
  font-size: 28px;
  line-height: 28px;
}
span {
  font-size: 18px;
}

HTML代码：

<p>
Hello, world!
</p>
<p>
Hello,
<span>world!</span>
</p>
<p>
Hello, world!
</p>

现象截图 #

原因分析 #

这个差异的核心是行内元素的基线对齐规则与行盒高度计算逻辑：

• 纯文本段落中，给p设置的line-height:28px刚好等于它的font-size，此时行盒高度完全匹配文本的内容高度，上下没有额外空白，段落整体高度稳定。
• 包含span的段落里，span作为行内元素，默认会和父元素文本的基线对齐。由于span字号更小，它的内容区域位置更低；同时span继承浏览器默认的line-height: normal（通常是字号的1.2倍左右），会产生上下半间距。这两个因素叠加后，整个行盒的实际高度会超过p设置的28px，导致这个段落整体高度变大，看起来它和下方段落的间距就比前两段更大。

设置span {line-height:0}时，强制压缩了span的行高，抵消了基线对齐带来的行盒高度膨胀，行盒高度回到接近28px的状态，间距差异自然就缓解了。

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