html - 跨度元素向右漂移(0.25 x 字体高度)像素

Question

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

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

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

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

http://codepen.io/danag/pen/RKZQxE

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

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

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

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

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

希望对您有所帮助。