# 外边距合并

URL: https://caijiao.org/css/05-box-model/03-margin-collapse
Source: docs/css/05-box-model/03-margin-collapse.md
Description: 外边距合并是指相邻垂直方向的外边距会合并为一个，避免间距叠加，影响布局效果。

在 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。
- 改变元素的显示类型。

## 外边距合并示例

[在线代码演示](/css/demos/8.html)