html给页面设置背景色后，给文字设置不同的背景色，文字的位置会发生偏移，无法对齐，如何解决？

Question

html给页面设置背景色后，给文字设置不同的背景色，文字的位置会发生偏移，无法对齐，如何解决？
我也不知道为啥，截图粘贴过来后看起来几乎没区别，但自己跑起来，看着很明显。
详细描述：
（1）当仅仅给文字设置不同背景色时，文字不会发生偏移：
代码：

<div style="height:100px;font-size: 20px;">    <span style="color:#008BFF;cursor: pointer;line-height:100px;">编辑</span>    <span style="color:#E02020;cursor: pointer;">删除</span></div>

运行结果：

（2）当设置html背景色时，文字设置相同或不设置背景色时，文字不会发生偏移：
代码：

<div style="background-color:rgb(43, 43, 41);height:100px;font-size: 20px;">        <span style="cursor: pointer;line-height:100px;">编辑</span>        <span style="cursor: pointer;">删除</span>    </div>

运行结果：

（3）设置html背景色后给文字设置不同背景色时，文字位置发生偏移：
代码：

<div style="background-color:rgb(43, 43, 41);height:100px;font-size: 20px;">    <span style="color:#008BFF;cursor: pointer;line-height:100px;">编辑</span>    <span style="color:#E02020;cursor: pointer;">删除</span></div>

运行结果：

期望运行结果：
希望文字位置不发生偏移

Answer 1

是不是默认边距的缘故，可以试试在 <style> 加一下 * { margin:0;padding:0;} 试试

Answer 2

https://codepen.io/h2278624265/pen/mdvQjWm
错觉吧

Answer 3

这个现象是由于HTML中元素的渲染方式导致的。当元素具有背景色时，浏览器会为该元素创建一个新的堆叠上下文（stacking context）。当在这个元素内部还有其他具有不同背景色的子元素时，浏览器会再次为这些子元素创建新的堆叠上下文。由于每个堆叠上下文都有自己的背景色，这可能会导致视觉上的偏移。

解决这个问题的一个方法是使用 vertical-align 属性来确保文字在垂直方向上对齐。同时，你也可以使用 display: inline-block 来确保 span 元素表现得像行内块元素，这样它们的背景色就不会影响布局。

下面是一个修改后的代码示例：

<div style="background-color:rgb(43, 43, 41);height:100px;font-size: 20px;vertical-align: middle;line-height: 100px;">    <span style="color:#008BFF;cursor: pointer;background-color: rgba(255, 255, 255, 0.1);display: inline-block;padding: 0 10px;">编辑</span>    <span style="color:#E02020;cursor: pointer;background-color: rgba(255, 255, 255, 0.1);display: inline-block;padding: 0 10px;">删除</span></div>

在这个示例中，我使用了 rgba 来设置 span 元素的背景色，并设置了一定的透明度，这样背景色就不会完全遮挡父元素的背景色。同时，display: inline-block 和 padding 用于确保 span 元素在视觉上表现为行内块元素，并且有适当的内边距。

这样修改后，即使给文字设置了不同的背景色，文字的位置也不会发生偏移。