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

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

Answer 2

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