子边距向父边距添加边距

Question

如果我有以下代码怎么办： 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;
}

为什么两个部分之间的白色 space 或者更确切地说是空白？？问题似乎是 h1 标签。如果我这样做：

h1{
    margin: 0;
}

呸！问题解决了。

我有两个问题。

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

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

我读过边距崩溃：

Mozilla

css tricks

但这似乎更像是 CHILD-MARGIN-ADDING-MARGIN-TO-PARENT .

Jsfiddle of issue

谢谢。

亚历山大。

Answer 1

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

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

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

来源

Answer 2

浏览器中的预期行为往往出乎意料。

我问这个问题真正想达到的目的不仅是找到问题的解决方案，而且实际上知道是什么导致了问题。

我最终在一个线程中找到了不相同但相似的部分，让我引用这部分，这将解开谜团：

父级 div 的边距和 h1 组合形成一个边距”，即使它们是嵌套的，因为它们有相邻的边距，它们之间没有填充或边框。

现在为我找到解决方案，

overflow:hidden on the parent div 工作得很好。

naeem 在较早的回答中当然强调了相同的解决方案。

代码如下：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{
        overflow: hidden; 
        height: 100%;
        background: pink;
    }

Here is the fiddle

子边距向父边距添加边距

Child margin adding margin to parent

html

css

margin