关于font-size小于1em的子元素无法覆盖父元素的技术疑问

当子元素的字体大小（font-size）小于1em时，子元素与父元素尺寸不一致，无法完全覆盖父元素，且父元素高度似乎是按自身字体大小的行高规则计算的，即使将父元素设置为display:inline-block也无法解决。

示例代码：

<span id="parent" style="background: blue; font-size: 10rem;">
  <span id="child" style="background: red; font-size: 0.7em">text</span>
</span>

解答 #

这是因为行内元素（span默认是行内元素）的高度由「行高（line-height）」决定，而非直接由内部子元素尺寸决定，哪怕修改子元素的font-size，父元素的行高规则没调整的话，高度还是会按默认逻辑生成。

具体原因拆解：

• 行内元素的默认行高是normal，这个值通常对应约1.2倍自身font-size的高度。父元素设置了font-size:10rem，它的默认行高就会基于这个值计算，所以父元素的高度是这个行高对应的行盒高度。
• 子元素的font-size:0.7em是继承父元素的font-size，也就是7rem，但子元素作为行内元素，它的存在不会改变父元素的行盒高度——父元素的行盒高度由行内元素的「内容区+上下间距」的最大值决定，而父元素自身的字体基线、上下间距已经固定，哪怕子元素更小，父元素的行盒高度仍会保留原有的高度。

如果想要让父元素贴合子元素尺寸，可以试试这些方法：

• 给父元素设置line-height: 0，压缩父元素的行高，使其贴合子元素高度；
• 将父元素改为块级元素，同时设置height: fit-content，配合子元素的行高调整；
• 给父元素和子元素设置相同的line-height，比如父元素设line-height: 0.7em（这里的em基于父元素font-size，刚好匹配子元素的font-size），让父元素行高与子元素尺寸对齐。

修改后的示例代码：

<span id="parent" style="background: blue; font-size: 10rem; line-height: 0;">
  <span id="child" style="background: red; font-size: 0.7em">text</span>
</span>

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