外边距合并发生在块级元素垂直相邻时，包括兄弟元素、父子元素或空元素间，合并后取最大外边距值，可通过添加border、创建BFC、使用flex/grid布局或改用padding避免。
在CSS布局中，margin collapse（外边距合并）是一个常见但容易被忽视的现象。它指的是在特定情况下，两个垂直方向的相邻元素的外边距会合并成一个单一的外边距，其大小等于两者中较大的那个。
什么情况下会发生margin collapse？
margin collapse主要发生在块级元素之间，且满足以下条件之一：
- 相邻兄弟元素：两个同级的块元素上下排列时，上方元素的下外边距与下方元素的上外边距会发生合并。
- 父元素与第一个/最后一个子元素：如果父元素没有border、padding、inline content等分隔，其与子元素的上下margin也可能合并。
- 空的块级元素：一个没有内容、padding、border的块元素，其自身的上下margin也会合并。
如何理解margin合并的计算方式？
当发生margin collapse时，合并后的外边距取两个参与合并的margin中的最大值，而不是相加。
例如：
立即学习“前端免费学习笔记（深入）”；
- 元素A的margin-bottom为20px
- 元素B的margin-top为30px
- 它们之间的实际间距是30px，而不是50px
如果是负边距参与，则合并结果会更复杂：正负margin相减，最终取“最大”效果（即绝对值大的负值可能主导结果）。
如何防止margin collapse？
在某些布局场景中，margin合并可能导致意料之外的间距。可以通过以下方式避免：
- 添加border或padding：给父元素设置border-top或padding-top，可阻断与子元素的margin合并。
- 使用BFC（块格式化上下文）：让元素创建新的BFC，比如设置overflow为hidden、auto等值。
- 使用flex或grid容器：弹性布局和网格布局中的子元素不会与父元素或彼此发生margin collapse。
- 将margin改为padding：在不影响设计的前提下，调整结构使用padding代替部分margin。
基本上就这些。理解margin collapse有助于写出更 predictable 的CSS布局，尤其是在处理纯块流式排版时特别重要。虽然它看似“反直觉”，但其实是CSS为了实现更自然的段落间距而设计的行为。
