相邻块级元素垂直margin会合并取较大值，如兄弟元素、空元素自身margin及父子无分隔时；设置border、padding、BFC、flex/grid布局等可阻止合并。
在CSS中，盒模型的外边距（margin）合并（Margin Collapse）是一个常见的布局现象，主要发生在块级元素的垂直方向上。理解margin合并的规则有助于避免意料之外的空白问题。
会发生margin合并的情况
以下情况中，相邻的块级元素的垂直margin会合并为一个margin，取其中较大的那个值：
- 相邻兄弟元素之间：两个同级的块级元素在垂直方向上紧挨着时，上方元素的下边距与下方元素的上边距会发生合并。
- 父元素与第一个/最后一个子元素之间：如果父元素没有border、padding、inline content等分隔，其与第一个或最后一个子元素的margin可能会合并。
- 空块级元素自身上下margin合并：一个块级元素内部为空，并且其自身的上margin和下margin之间没有border、padding、内容等分隔，这两个margin也会合并。
<div style="margin-bottom: 20px;">A</div> <div style="margin-top: 30px;">B</div>
这两个div之间的实际间距是30px，而不是50px，因为margin发生了合并。
不会发生margin合并的情况
以下情况会阻止margin合并：
立即学习“前端免费学习笔记（深入）”；
- 元素设置了border或padding：只要父元素有border或padding，就能隔离父子之间的margin。
-
元素处于不同的BFC（块格式化上下文）：当元素在不同的BFC中时，margin不会合并。可通过
overflow: hidden、display: flow-root等方式创建BFC。 - flex、grid、绝对定位子元素：Flexbox或Grid容器内的子项，以及绝对定位元素，不参与margin合并。
- 行内块元素或浮动元素：这些元素不参与标准流中的margin合并。
- margin之间有其他内容（如文本、inline元素）：只要有实际内容存在，就会阻断margin合并。
如何避免不必要的margin合并
如果你希望保持独立的margin而不被合并，可以尝试以下方法：
- 给父元素添加
border: 1px solid transparent或padding: 1px。 - 使用
overflow: hidden触发BFC。 - 改用padding来控制内部间距而非依赖子元素的margin。
- 调整HTML结构，避免直接相邻的块级margin冲突。
基本上就这些常见场景。margin合并只发生在块级元素的垂直方向，水平方向的margin从不合并。掌握这些规则，能更精准地控制页面布局间距。
