为何给div添加border后，其背景会覆盖包含margin的全部区域？

嘿，这个现象的核心其实是CSS里的**margin塌陷（Margin Collapse）**和元素背景绘制范围共同作用的结果，我给你一步步拆解：

1. 未添加border时的怪异现象 #

当你的div没有设置border（也没有padding）时，会触发垂直margin塌陷机制：

• 作为块级元素的table，它的top-margin会和父div的margin合并——简单说就是table的margin“跑到”了div的外面，不再属于div的内部空间。
• 这时候div的实际高度只等于table本身的高度（不含margin），而CSS中块级元素的背景默认是绘制到自身的content box边缘（没有border/padding时，content box就是元素的实际内容区域），所以蓝色背景只会覆盖table本身，margin区域自然没有背景色。

2. 添加border后的变化 #

当给div加上border之后，直接打破了margin塌陷的触发条件：

• border相当于给父元素创建了一个“物理隔离层”，子元素table的margin再也无法和父div的margin合并，只能被限制在div内部。
• 此时div的高度会包含table的margin部分，再加上div的背景绘制范围是延伸到border box的边缘（包含内部所有被子元素占据的空间，包括margin），所以整个区域（包括table的margin）都会被蓝色背景覆盖。

简单总结：有没有border决定了父元素是否会和子元素发生margin塌陷，进而影响父元素的高度计算和背景覆盖范围~

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