为何父元素背景未覆盖子元素margin？添加border后生效的原因是什么

场景1：父元素无border #

给父元素设置背景色#666、不设置border的代码如下：

<div style="background-color: #666">
    <div style="margin: 20px">Some Content - no border</div>
</div>

此时父元素的背景不会应用到子元素的margin区域，20px的间距会出现在父元素容器的外侧。

场景2：父元素添加border #

给父元素添加border后的代码如下：

<div style="background-color: #666; border: 1px solid">
    <div style="margin: 20px">Some Content - has border</div>
</div>

此时父元素的背景色会覆盖包含子元素margin在内的全部内部区域，20px的间距出现在父元素容器内侧。

两种场景的表现差异是CSS两个核心规则共同作用的结果：

• 块级元素外边距折叠规则：普通文档流中的块级父元素，如果没有设置边框、内边距、行内内容做分隔，也没有创建块格式化上下文（BFC），就会和自身的第一个、最后一个子元素发生上下外边距折叠。场景1中父元素没有border，子元素设置的margin: 20px不会在父元素内部撑开间距，而是直接"穿透"父元素，和父元素的外边距合并为同一个外边距，最终表现为父元素整体和外部内容的间距——这块margin区域本质上已经不属于父元素自身的盒内部范围，自然不会渲染父元素的背景色。
• 元素背景绘制边界规则：元素的背景色、背景图默认绘制在自身border盒的内部范围。场景2中给父元素添加border后，边框会成为父子元素之间的分隔层，直接阻断外边距折叠，此时子元素的margin: 20px完全留在父元素的border盒内部，属于父元素的内部渲染范围，因此会被父元素的背景色覆盖。

除了添加border外，给父元素设置非0的padding、将父元素设置为BFC（比如添加overflow: hidden、display: flow-root属性），都可以阻断外边距折叠，实现背景覆盖子元素margin区域的效果。

该行为是CSS标准明确规定的渲染逻辑，并非浏览器bug，相关规则定义在官方CSS规范中：

• 外边距折叠的触发条件、阻断规则，记录在《CSS Level 2 Revision 2 (CSS 2.2) Specification》的Collapsing margins章节，其中明确说明非none值的border、非0值的padding都可以阻断父子元素的外边距折叠。
• 背景绘制范围的规则，记录在《CSS Box Model Module Level 3》的Background painting area章节，元素背景默认覆盖从border边缘向内的所有区域，因此没有折叠到父元素外部的子元素margin区域，会被父元素背景正常覆盖。

内容的提问来源于stack exchange，提问作者elmar