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;
}

为什么两个部分之间的空白或相当边距？问题似乎是h1标签。如果我这样做：

h1{
    margin: 0;
}

Bham！问题解决了。

我有两个问题。

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

我的第二个问题，以及最大的问题，现在假设浏览器甚至我明确指出h1的margin-top应该说20-30px，边距应该来自.main部分为什么是MARGIN应用h1哪个内部。主要在.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;
    }

这是正常行为（至少在浏览器实现中）。保证金不会影响孩子与其父母相关的职位，除非父母有填充，在这种情况下，大多数浏览器会将孩子的保证金添加到父母的填充。

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

Answer 2

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

通过询问这个问题我真正想要实现的不仅仅是解决问题，而且实际上知道导致问题的原因。

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

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

现在为我提供解决方案，

溢出：隐藏在父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

子保证金为父母增加保证金

2 个答案: