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>