HTML和CSS有时让我大吃一惊.
带边框的DIV显示元素及其内容的完整高度的背景颜色.为什么没有边界,DIV会假设(反向继承？)其孩子的边缘？
作为一个例子,这里是一个JSFiddle,说明有和没有边框的行为.
解决方法
当然.在CSS中,默认情况下,相邻的顶部和底部边距相互重叠.在相邻的兄弟选择器()被认为/得到良好支持之前,这是一个合理的解决方法,因为这意味着如果你写了h2 {margin-top：3em;},你的h2s上面就会有3到3个空间.如果前面有一个段落,下边距为1em.
在第二个示例中,因为< div>没有任何顶部或底部填充或边框,其顶部和底部边距与< h1>的默认顶部和底部边距相邻.即使< div>的边距没有任何高度,它们仍然被视为存在,因此< h1>的边距必须重叠它们.由于< div>的边距在< div>的背景颜色区域之外,因此< h1>的边距也必须位于外部.
在您的第一个示例中,因为< div>有边框,其边距不再与< h1>的边距相邻,因此不会发生重叠.您可以通过向< div>：http://jsfiddle.net/ahNUX/7/添加顶部和底部填充来获得相同的效果
(我不确定你对< div>“反向继承”它的孩子的填充意味着什么.在你的例子中,< div>和< h1>都没有任何填充.< div内的空间;第一个示例中的div>是由< h1>的上下边距创建的.)
