CSS margin-top <h1>影响父母的保证金

Question

我现在已经找了一段时间来解决这个问题并没有找到答案.在向元素添加边距顶部时,在我的情况下,它主要发生在标题上.在许多情况下,保证金顶部与父母共享.

HTML

  <div>
      <h1>My title</h1>
    </div>

CSS

div{
  padding:20px;
}

h1{
 margin-top: 20px;
}

前面代码的结果也会为div添加margin-top,就好像我们有以下内容:

div{
  padding:20px;
  margin-top:20px; /*this one is implemented by the browser, not written on the code*/
}

解决这个问题的方法是通过添加overflow:auto到父级,在这种情况下,div css具有:

div{
  padding:20px;
  overflow:auto;
}

虽然前面的例子解决了这个问题,但我不清楚为什么??? .这与"利润率下降"有关,显然保证金与母公司的保证金相结合.但为什么????

我们怎么知道父母何时会崩溃孩子的边缘,什么时候不知道,这个块的这个属性的目的是什么,或者它是一个bug？

这是问题的JSFiddle演示.

这是解决方案的JSFiddle演示

谢谢.

Answer 1

谢谢大家的回答,@ gaurav5430发布了一个非常精确定义的链接,我想在这个答案中总结一下.至于为什么他们认为这些元素应该像这样,我仍然不清楚; 但至少我们能够找到适用于折叠边距的规则:

"简单来说,这个定义表明,当两个元素的垂直边距接触时,只有具有最大边际值的元素的边缘将被尊重,而具有较小边缘值的元素的边缘将被折叠为零.

基本上在原始问题的示例中,最大的margin-top是<h1>因此采用并应用于父级的<div>.

此规则已取消:

• 浮动元素
• 绝对定位的元素
• 内联块元素
• 溢出设置为除可见之外的其他元素(它们不会与子项一起折叠边距.)
• 清除元素(它们不会使用父块的下边距折叠其顶部边距.)
• 根元素

这就是overflow:hidden解决问题的原因.

谢谢@ gaurav5430; 这里是参考:http://reference.sitepoint.com/css/collapsingmargins

还要感谢@Adrift发布的非常好的资源,虽然我发现@ gaurav5430的答案更直接,更容易理解.

Answer 2

如果element是第一个子元素,它会将margin-top添加到父元素,并与父元素的margin-top折叠.

W3崩溃边缘部分清楚地说明了为什么有时保证金不会崩溃的原因.

我建议使用padding-top或此解决方法:子元素上的边距移动父元素,因为overflow: hidden可以添加附带损坏.

看这个例子:小提琴

HTML:

<div id="outside">
    <div id="div1">
        <h1>margin in parent</h1>
    </div>

    <div id="div2">&nbsp;
        <h1>margin inside</h1>
    </div>
</div>

CSS:

#outside {
    background-color: #ccc;
    border:1px solid #000;
}
#div1 {
  background-color: #66d;
}
#div1 h1 {
  margin: 20px 0 0 0;
}
#div2 {
  background-color: #6d6;
}
#div2 h1 {
  margin: 20px 0 0 0;
}