具有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文件重置例如所有不同的浏览器默认margin和padding避免这些类型的问题。

Answer 2

这里是工作示例。请改为html，body with * in css rule。

* { 
    margin:0; 
    padding:0; 
} 

Answer 3

这是因为h1和p标签都有默认的保证金（或保证金崩溃）。

缘塌陷

顶部和块的底部边缘有时合并（折叠）成单个裕量的大小是最大的边缘结合成它的，被称为余量折叠行为。通过Mozilla MDN

的jsfiddle-DEMO

你可以做这样的去除保证金：

CSS：

h1, p { 
    margin:0; 
}