为何嵌套内层span高度大于外层span？如何实现二者重叠？

• #outer是默认的inline元素，即便添加了relative定位，它的高度由所在行的line-height（继承自父元素p.font-mono）决定，属于行盒高度，而非自身文本的实际高度。
• #inner是absolute定位元素，会脱离文档流，此时它的display会自动变为inline-block（块级化），高度由自身字体大小、默认line-height等属性计算得出，和#outer的行盒高度计算逻辑不同，导致二者高度不一致，进而出现垂直偏移。
• 另外，inline元素作为绝对定位的包含块时，其包含块范围是自身内容区，absolute元素的默认垂直对齐逻辑和行内元素的基线对齐规则冲突，进一步加剧了偏移问题。

可以通过以下几种方式实现精准重叠：

方法1：将#outer改为inline-block #

修改#outer的类，添加inline-block，让它的高度由自身内容决定，和#inner的高度计算逻辑统一：

<p class="font-mono">abc<span id="outer" class="relative inline-block"><span id="inner" class="absolute left-0 top-0">a</span>a</span>defg</p>

方法2：统一#inner的line-height #

给#inner添加leading-inherit类（Tailwind的继承行高类），让它继承父元素的行高，确保高度和对齐方式一致：

<p class="font-mono">abc<span id="outer" class="relative"><span id="inner" class="absolute left-0 top-0 leading-inherit">a</span>a</span>defg</p>

方法3：让#inner填满包含块 #

给#inner添加inset-0类（Tailwind的top/right/bottom/left全0的简写），同时设置display: inline并继承行高，确保完全覆盖#outer：

<p class="font-mono">abc<span id="outer" class="relative"><span id="inner" class="absolute inset-0 inline leading-inherit">a</span>a</span>defg</p>

内容的提问来源于stack exchange，提问作者D-Y