外边距合并

在 CSS 中，当两个块级元素垂直相邻时，它们的外边距（margin）可能会发生合并（margin collapsing），只取较大的外边距值，而不是相加。

1. 外边距合并示例

css

p {
  margin-top: 30px;
  margin-bottom: 20px;
}
div {
  margin-top: 40px;
  margin-bottom: 10px;
}

当 <p> 和 <div> 竖直相邻时，它们之间的间距不会是 20px + 40px = 60px，而是 40px（较大值）。

2. 外边距合并的条件

必须是垂直方向相邻的块级元素。
中间没有边框、内边距或内容阻止合并。
父元素和第一个子元素的上外边距可能合并，类似的下外边距也可能合并。

3. 如何避免合并

给父元素设置边框、内边距或 overflow 属性。
使用 padding 替代 margin。
改变元素的显示类型。

外边距合并示例

loading