CSS边缘怪癖 - 请帮我理解

在子元素(h2)上使用margin时,为什么它会为父元素(#box)提供保证金呢？如果我将边距更改为填充,则按预期工作.有什么改变或我错过了什么？这是我的示例代码

Fun with CSS3

如果任何人或每个人都可以分享他们的边缘怪癖经验.谢谢

这是因为利润率下降.我讨厌这个"功能",但这就是你所呈现的"问题"的原因.摘录规范(重点是我的):

如果框的顶部和底部边距相邻,则边距可能会通过它折叠.在这种情况下,元素的位置取决于其与边缘正在折叠的其他元素的关系.

如果元素的边距与其父元素的上边距折叠,则框的上边框边缘定义为与父元素相同.

这里有几篇关于这个主题的文章:

http://reference.sitepoint.com/css/collapsingmargins

http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php