css - 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 (for the .wrapper) - 没有其他 CSS 用于section:

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

然后这是结果：

我那里没有任何ul's 或任何其他标记，当我检查每个部分时也没有任何边距或填充显示。我正在使用 Bootstrap，但我认为这不会弄乱这些部分。

但是......如果我添加：

* {
  overflow: auto;
}

这将解决它，并且差距消失了。

话虽如此，我是否需要在overflow: auto我的 CSS 中“消除”与 section 元素的差距？这会导致我添加到每个部分的其他元素出现问题吗？我需要附加每个section元素以补偿浏览器或 Bootstrap 的一些不稳定行为，这似乎很奇怪？在以这种方式使用元素时，我以前从未真正见过这种section情况，所以我倾向于相信它可能是 Bootstrap 搞砸了。

标签： csshtmlsections

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>