html - 元素之间的垂直间距为 100vh

Question

有几个 height:100vh 的元素，它们在包含元素时显示垂直间距。

<section>
  <p>A</p>
</section>
<section>
  <p>B</p>
</section>

随着样式:

section {
  height:100vh;
}

您可以看到 example here ，黄色背景在每个元素上方可见，即使各部分的边距设置为 0。

如何去除间距？

Answer 1

只需将 overflow:auto; 添加到 .content>section

.content>section {
height: 100vh;
margin: 0;
overflow:auto;
}

或者，您可以从所有元素中删除边距，但是您必须同时编辑可能需要它的元素的边距和填充。

* {
    margin:0;
    padding:0;
}

例如，每个浏览器都会有一个默认的用户代理样式表，它会为所有 h1 元素添加一些边距，因此您可以删除它来覆盖您需要的元素的用户代理样式表规则。

h1 {
    margin:0;
}

例如，您可以通过使用 reset.css 文件重置所有不同浏览器的默认边距和填充来避免此类问题。