Html 跨度元素向右偏移（0.25 x字体高度）像素

我正在寻找以下行为的解释

我有一个包含三个

元素的

容器。第一个和第三个元素是装饰性的，它们的目的是用不同的背景颜色填充浏览器窗口的宽度。这是通过调整元素的水平填充和边距来实现的

第二个和第三个

元素之间存在不必要的间隙。我已经确定间距的宽度正好是为父

元素设置的字体大小的四分之一

我的解决方案是在第三个

元素中添加一个负边距。下面的代码片段演示了该问题，以及我对该问题的解决方案

有人能给我解释一下这种行为的原因吗

我也很高兴知道一个更好的解决这个布局问题的方法

正文{
保证金：0；
填充：0；
溢出x：隐藏；
}
h2{
字体大小：32px；
}
.bg蓝色{
背景色：#1111ee；
}
.bg红色{
背景色：#ee1111；
}
#我的容器{
背景色：#ffffff；
}
#我的内容,，
#我的内容也是{
宽度：80%；
保证金：自动；
背景色：#ffffe0；
填充：1.5em；
}
.标题包装{
显示：内联；
字体大小：100px；
线高：1.2；
背景色：#ffff00；
}
.标题.标题{
显示：内联；
文本转换：大写；
背景色：#eee；
}
.标题h2{
显示：内联；
左侧填充：0.3em；
右侧填充：0.3em；
}
.向左延伸{
左边距：-2000px；
右边距：0；
左侧填充：2000px；
右边填充：0；
}
.向右延伸{
左边距：0；
右边距：-2000px；
左侧填充：0；
右边填充：2000px；
}
.左-25{
左边距：-25px；
}

标题文本
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

标题也一样
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

您似乎遇到了空白问题，任何空白都会导致该位置出现空格（

）。最好的解决方案是

float

（这会导致许多其他问题），或者将字体大小设置为父元素的字体，然后将其设置回子元素中的值

.parent { font-size: 0; }
.parent > * { font-size: 1rem; }

---

希望这会有所帮助。

我认为您将此操作复杂化了，但原因是其中有一个空格字符。您可以通过将字体大小设置为0，然后在子项上重新设置，来最小化此问题。然而，最好是一个

h2

和一个

：在
之前和
：之后
和
位置：绝对
和
高度：100%
，然后绝对定位它们，使彩色块出现。。。这给人的感觉是基于DOM节点的麻烦…谢谢。我完全忘记了空格的问题。如果你想加上你的评论作为回答，我会接受的。