答案：CSS中margin合并指相邻块级元素的上下外边距取最大值而非相加，常见于普通流中无分隔的垂直margin间；可通过创建BFC、使用flex/grid布局或添加border/padding等方式防止。
在CSS布局中，margin合并（Margin Collapse）是一个常见的现象，尤其在处理块级元素垂直间距时容易出现。它指的是两个相邻的块级元素的上下外边距会合并成一个外边距，其大小取两者中的较大值，而不是相加。
margin合并发生的条件
margin合并只在特定条件下发生，主要出现在以下情况：
- 块级元素在普通文档流中（非浮动、非绝对定位）
- 垂直方向上的margin（即margin-top与margin-bottom）
- 相邻的两个box的margin之间没有border、padding、inline元素或空隙分隔
常见场景包括：
- 相邻兄弟元素之间的上下margin合并
- 父元素与第一个/最后一个子元素的上下margin合并
- 空块级元素的上下margin合并
margin合并的实际例子
例如有两个相邻的段落：
立即学习“前端免费学习笔记（深入）”；
<p style="margin:20px 0;">第一段</p>
<p style="margin:30px 0;">第二段</p>
它们之间的实际间距不是50px，而是30px，因为上下margin发生了合并，取最大值。
如何防止margin合并
虽然margin合并是CSS规范的一部分，有时有助于排版紧凑，但在某些布局中可能带来意外效果。以下是几种常用的解决方法：
-
添加border或padding：在元素之间加入border或padding可以阻止margin合并。例如给父元素设置
border-top: 1px solid transparent或padding: 1px。 - 使用padding代替margin：通过调整内边距来控制间距，避免使用外边距。
-
触发BFC（块格式化上下文）：让元素创建独立的BFC，从而隔离margin行为。可通过以下方式实现：
- 设置
overflow: hidden - 设置
display: flow-root - 设置
float: left/right（不推荐用于布局） - 使用
position: absolute或flex/grid容器
- 设置
-
使用flex或grid布局：将父容器设为
display: flex或display: grid，其子元素不会发生margin合并。 - 使用伪元素或额外标签分隔：插入一个无高度的元素或利用::before/::after增加隔离层。
总结
margin合并是CSS的正常行为，理解其规则有助于避免布局错乱。在需要精确控制间距时，可以通过创建BFC、使用flex布局或添加border/padding等方式有效防止合并。掌握这些技巧，能更稳定地控制页面结构。
基本上就这些，遇到垂直间距“缩水”时，先检查是不是margin合并在起作用。
