HTML部分元素之间的间隙

Question

我不确定为什么会发生这种情况，但是由于某种原因，我正在处理的布局中的某些<section>元素之间存在间隙。

目前我有3个单独的部分：

<section class="top">
  <div class="wrapper">
    <h2>Top Section</h2>
    </div>
 </section>
 <section class="middle">
    <div class="wrapper">
      <h2>Middle Section</h2>
     </div>
  </section>
  <section class="lower">
     <div class="wrapper">
       <h2>Lower section</h2>
     </div>
  </section>

CSS（用于.wrapper）-没有用于section的其他CSS：

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

然后是结果：

我那里没有任何ul或任何其他标记，当我检查每个部分时都没有任何空白或空白。我正在使用Bootstrap，但我认为这不会与各节混淆。

如何 ...如果我添加：

* {
  overflow: auto;
}

这将解决该问题，并且差距消失了。

话虽如此，我是否需要在CSS中使用overflow: auto来“剔除”与section元素之间的空白？这会导致问题与我添加到每个部分的其他元素一起出现吗？似乎很奇怪，我需要附加每个section元素来补偿浏览器或Bootstrap的某些奇怪行为吗？我以前从未真正以这种方式使用section元素时见过这一点，所以我倾向于认为这可能是Bootstrap弄乱了事情。

Answer 1

h2具有margin-top和margin-bottom的浏览器指定的基本样式。将它们设置为0可以解决您的问题。

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

section {
  background-color: lightgray;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
}

<section class="top">
  <div class="wrapper">
    <h2>Top Section</h2>
  </div>
</section>
<section class="middle">
  <div class="wrapper">
    <h2>Middle Section</h2>
  </div>
</section>
<section class="lower">
  <div class="wrapper">
    <h2>Lower section</h2>
  </div>
</section>