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 for the section:

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

然后这是结果：

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

然而...如果我添加：

* {
  overflow: auto;
}

这将修复它，间隙消失。

所以话虽这么说，我需要在我的 CSS 到 "nuke" 中有 overflow: auto 来弥补这些部分的差距元素？这会导致我添加到每个部分的其他元素出现问题吗？似乎很奇怪我需要附加每个 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>

HTML 部分元素之间的间隙

Gaps between HTML section elements

html

css

sections