子边距为父边距添加边距

如果我有以下代码怎么办： HTML：

<section class="home">
</section>
<section class="main">
    <h1>Hello</h1>

</section>

CSS代码：

html,body{
    height: 100%;
    width: 100%;
}
.home{
    background: #000;
    height: 100%;
}
.main{
    height: 100%;
    background: pink;
}

为什么两个部分之间有空白或边距？问题似乎出在 h1 标签上。如果我做 ：

h1{
    margin: 0;
}

巴姆！问题解决了 。

我对此有两个问题。

第一个小问题，现在浏览器可能会应用这种样式，我可以通过重置来纠正这个问题，没有问题。但这仍然是一个问题。

我的第二个问题，也是一个大问题，现在假设浏览器甚至我明确指定 h1 的顶部边距应该是 20-30px，边距应该位于 .main 部分的一侧，为什么将边距应用于 h1 .main 内部是否充当 .main 和 .home 之间的边距？ 这个独特问题的原因是什么？

我读过有关边距折叠的内容：

Mozilla

CSS 技巧

但这似乎更像是子保证金添加给父保证金。

问题的Jsfiddle

谢谢 。

亚历山大.

http://jsfiddle.net/naeemshaikh27/qbaucv3j/1/

  .main{
        overflow: hidden; 
        height: 100%;
        background: pink;
    }

这是正常行为（至少在浏览器实现中）。边距不会影响子级相对于其父级的位置，除非父级具有填充，在这种情况下，大多数浏览器会将子级的边距添加到父级的填充中。

source https://stackoverflow.com/a/1939980/3556874