html字体整体偏移,html - 跨度元素向右偏移（0.25 x字体高度）像素 - 堆栈内存溢出...

比眉伴天荒 2022-10-05 12:50 93阅读 0赞

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

我有一个带有三个元素的

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

第二个和第三个元素之间存在不必要的间隙。 我确定间隙的宽度恰好是为父

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

我对这个问题的解决方案是在第三个元素中添加负边距。 以下代码片段演示了该问题以及我对该问题的解决方案。

有人可以向我解释这种行为的原因吗？

我也很高兴得知该布局问题的更好解决方案。

body \{ margin : 0; padding: 0; overflow-x: hidden; \} h2 \{ font-size: 32px; \} .bg-blue \{ background-color: \#1111ee; \} .bg-red \{ background-color: \#ee1111; \} \#my-container \{ background-color: \#ffffff; \} \#my-content, \#my-content-too \{ width: 80%; margin: auto; background-color: \#ffffe0; padding: 1.5em; \} .heading-wrapper \{ display: inline; font-size: 100px; line-height: 1.2; background-color: \#ffff00; \} .heading-wrapper .heading \{ display: inline; text-transform: uppercase; background-color: \#eee; \} .heading h2 \{ display: inline; padding-left: 0.3em; padding-right: 0.3em; \} .extend-left \{ margin-left: -2000px; margin-right: 0; padding-left: 2000px; padding-right: 0; \} .extend-right \{ margin-left: 0; margin-right: -2000px; padding-left: 0; padding-right: 2000px; \} .left-25 \{ margin-left: -25px; \}

## Heading Text ##

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

## Heading Too ##