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

Question

有一些height:100vh元素，它们在包含元素时会显示垂直间距。

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

使用样式：

section {
  height:100vh;
}

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

如何删除间距？

Answer 1

这是因为h1和p标签有默认边距（或边距折叠）。

保证金崩溃

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠。 Mozilla MDN

JSFiddle - DEMO

您可以这样做以删除保证金：

<强> CSS：

h1, p {
    margin:0;
}

Answer 2

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

即可

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

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

* {
    margin:0;
    padding:0;
}

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

h1 {
    margin:0;
}

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

Answer 3

这是一个有效的例子。请在css规则中使用 * 更改 html，正文 。

* {
    margin:0;
    padding:0;
}