Box模型有什么用？儿童保证金影响父母

Question

HTML和CSS有时会让我大吃一惊.

带边框的DIV显示元素及其内容的完整高度的背景颜色.为什么没有边界,DIV会假设(反向继承？)它的孩子的边缘？

作为一个例子,这里是一个JSFiddle,说明有和没有边框的行为.

http://jsfiddle.net/ahNUX

http://jsfiddle.net/ahNUX/1/

有没有人想解释这是一个"功能",而不是某种错误？

更新:向父级添加1px填充是一个快速修复.

Answer 1

当然.在CSS中,默认情况下,相邻的顶部和底部边距相互重叠.在相邻的兄弟选择器(+)被认为/得到良好支持之前,这是一个合理的解决方法,因为它意味着如果你写了h2 {margin-top: 3em;},你的h2s上面有3个数量的空间,即使它前面有一个段落1em的下边距.

在第二个示例中,因为<div>没有任何顶部或底部填充或边框,其顶部和底部边距与<h1>默认的顶部和底部边距相邻.即使它<div>的边缘没有任何高度,它们仍然被视为存在,因此它们<h1>的边缘必须重叠它们.作为<div>的利润率是由定义外的背景色区域的<div>,所述<h1>的边缘必须被位于外侧太.

在您的第一个示例中,因为它<div>有一个边框,其边距不再与边距相邻<h1>,因此不会发生重叠.你可以通过添加顶部和底部填充来获得相同的效果<div>:http://jsfiddle.net/ahNUX/7/

(我不确定你对<div>孩子的填充"反向继承" 是什么意思.在你的例子中,既没有<div>也<h1>没有任何填充.<div>你的第一个例子中的空间是由<h1>顶部和底部创建的余量.)

Answer 2

这是利润率下降的结果.请参见http://www.w3.org/TR/CSS2/box.html#collapsing-margins

简而言之,<h1>示例中元素的顶部和底部边距可能会使其边缘与其上方或下方的另一个元素折叠(或重叠),这会导致与背景颜色发生冲突,因此未显示.另一方面,如果您有边框,则规则会更改.

该规范很好地解释了它,虽然干燥且有点技术性.