CSS页边距# 影响父母的保证金

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？

谢谢。

Answer 1

谢谢大家的回答，@gaurav5430发布了一个链接，它的定义非常精确，我想在此答案中进行总结。至于为什么他们决定这个元素应该表现得如此，我仍然不清楚；但至少我们能够找到适用于利润率下降的规则：

“简单来说，此定义表示当两个元素的垂直边距相接触时，将仅保留边距值最大的元素的边距，而边际值较小的元素的边距将被折叠为零

基本上，在我们关于原始问题的示例中，最大的边际收益是<h1>因此而采用并应用于父项的收益之一<div>。

该规则被取消：

• 浮动元素
• 绝对定位的元素
• 内联块元素
• 溢出元素设置为可见以外的任何元素（它们不会与子元素折叠边距。）
• 已清除元素（它们不会用其父块的底部边距折叠顶部边距。）
• 根元素

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

也要感谢@Adrift发布了很好的资源，尽管我发现@ gaurav5430的答案更直接，更容易理解。