子边距向父级添加边距答案

【问题标题】：Child margin adding margin to parent子边距向父级添加边距
【发布时间】：2015-01-23 04:16:39
【问题描述】：

如果我有以下代码： 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 部分的一侧为什么应用边距TO h1 .main 内部是 .main 和 .home 之间的边界吗？这个独特问题的原因是什么？？

我已阅读有关边距折叠的信息：

Mozilla

css tricks

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

Jsfiddle of issue

谢谢。

亚历山大。

【问题讨论】：

Margin on child element moves parent element的可能重复
w3.org/TR/CSS21/box.html#collapsing-margins
@CBroe 是您提供的与我的问题相关的第二个链接？？
它解释了折叠边距/相邻边距问题——到目前为止你似乎还没有理解（“但这似乎更像是 CHILD-MARGIN-ADDING-MARGIN-TO-家长。”)
@CBroe 是关于 2 个相邻的链接，相邻组件的边距因相邻或相邻而折叠？？

标签： html css margin

【解决方案1】：

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

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

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

来源 https://stackoverflow.com/a/1939980/3556874

【讨论】：

【解决方案2】：

浏览器中的预期行为通常是出乎意料的。

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

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

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

现在对我来说很好的解决方案，

overflow:hidden 在父 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

【讨论】：