父元素不为子元素margin着色，添加border后却生效？

复现代码 #

CSS代码 #

body {
  margin: 0;
  background: white;
}

div {
  background-color: red;
  /*   border: 2px solid black; */
}

HTML代码 #

<div>
  <p> hello </p>
</div>

核心原因：父与子的外边距折叠 #

这就是外边距折叠的典型场景。当父元素满足以下全部条件时，第一个子元素的上外边距会和父元素的上外边距发生折叠：

• 父元素未设置 border、padding
• 父元素顶部无内联内容（比如文字、inline元素）
• 父元素未创建BFC（比如没设置overflow: hidden、display: flex等规则）

这种情况下，子元素<p>的默认上margin会“溢出”到父元素<div>的外部，该margin区域不属于父元素的背景覆盖范围，自然看不到红色背景。

给父元素加上border后，相当于在父元素顶部添加了一道“屏障”，直接阻断了外边距折叠，子元素的margin被限制在父元素内部，父元素的红色背景就能覆盖这个区域了。

其他替代解决办法（除了加border） #

• 给父元素添加顶部padding（比如padding-top: 1px）
• 给父元素创建BFC，比如设置overflow: hidden、display: flex、display: grid等
• 在父元素顶部添加空的内联元素（比如<span></span>）

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