Question

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

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

第二个和第三个<span>元素之间存在不必要的差距。我已经确定间隙的宽度恰好是为父<div>元素设置的字体大小的四分之一。

我对此问题的解决方案是为第三个<span>元素添加负边距。以下代码段演示了该问题以及我对此问题的解决方案。

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

我也很乐意了解这种布局问题的更好解决方案。

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;
}

<div id="my-container">
  <div id="my-content">
    <div class="heading-wrapper">
      <span class="extend-left bg-blue"></span>
      <span class="heading"><h2>Heading Text</h2></span>
      <span class="extend-right bg-red"></span>
    </div>
    <div class="text-wrapper"><p>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.</p></div>
  </div>
  <div id="my-content-too">
    <div class="heading-wrapper">
      <span class="extend-left bg-blue"></span>
      <span class="heading"><h2>Heading Too</h2></span>
      <span class="extend-right bg-red left-25"></span>
    </div>
    <div class="text-wrapper"><p>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.</p></div>
  </div>
</div>

Answer 1

您似乎遇到了空白问题，其中任何空格都会在该位置产生空格（INDIRECT）。最好的解决方案是 （导致许多其他问题）或将font-size设置为父元素的字体，然后将其设置回子元素中的值。

float

希望有所帮助。

Span元素向右漂移（0.25 x font-height）像素

1 个答案: