我现在在寻找一个这个问题，并没有找到一个直接的答案。
当向元素添加边距顶点时，在我的情况下，它主要发生在标题上。在许多情况下，边际保证金与父母共享。
当向元素添加边距顶点时，在我的情况下，它主要发生在标题上。在许多情况下，边际保证金与父母共享。
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 demo的问题。
这里是JSFiddle demo的解决方案
谢谢。
解决方法
感谢大家的答案，@ gaurav5430发布了一个非常精确的定义的链接，我想总结一下这个答案。为什么他们决定这个元素应该是这样的，对我来说还是不清楚的;但至少我们能够找到适用于折叠边距的规则：
“简单来说，这个定义表明，当两个元素的垂直边距相互接触时，只有具有最大边距值的元素的边距才能得到兑现，而边界值较小的元素的边距将被折叠为零
基本上我们在原始问题的例子中，最大的margin-top是< h1>因此采用并应用于父< div>。
此规则已取消：
>浮动元素
>绝对定位的元素
>内嵌块元素
>具有溢出的元素设置为除可见之外的任何元素(它们不会与子元素折叠边缘)。
>清除的元素(它们不会使其顶部边距与其父块的底边缘折叠)。
>根元素
这就是为什么overflow：hidden解决了这个问题。
谢谢@ gaurav5430;这里是参考：http://reference.sitepoint.com/css/collapsingmargins
还感谢@Adrift发布了非常好的资源，虽然我发现@ gaurav5430的答案更直观，更容易理解。
