外边距合并是指相邻块级元素的垂直外边距（margin-top与margin-bottom）取较大值而非相加，常见于父子或兄弟元素间；可通过添加透明边框、margin-reset、触发bfc（如overflow:hidden、display:flow-root）等方式阻止。
什么是外边距合并（margin collapse）
相邻块级元素的垂直 margin-top 和 margin-bottom 会“叠”成一个，取其中较大者——不是相加，也不是忽略，而是合并。常见于父子、兄弟元素之间，比如两个 <p></p> 或父容器与第一个子元素之间。
用透明边框阻止父子间 margin 合并
给父元素设置 border（哪怕只是 1px solid transparent）就能切断父子 margin 合并，因为合并只发生在「无边框、无内边距、无内容分隔」的块级上下文中。
实操建议：
- 父元素加
border: 1px solid transparent，不改变视觉，但触发 BFC 边界 - 也可用
padding: 0.1px替代，但需注意可能影响尺寸计算 - 避免用
outline，它不参与盒模型，无法阻止合并
用 margin-reset 清除兄弟元素间的合并
兄弟元素间合并常导致列表项或段落间距失控。与其依赖合并规则，不如主动重置：只给元素设 margin-top 或只设 margin-bottom，并统一由父容器控制间隔。
立即学习“前端免费学习笔记（深入）”；
例如：
.list-item { margin-top: 16px; /* 不设 margin-bottom */ } .list-item:first-child { margin-top: 0; }这样所有间距都来自上方元素的 margin-top，自然规避了上下 margin 相遇合并的问题。
更可靠的方式：触发 BFC 或使用 flex/grid
透明边框和 margin-reset 是“绕过”问题，而真正治本的是让元素脱离常规文档流的合并上下文：
- 给父容器加
overflow: hidden、display: flow-root或display: flex，均可创建新 BFC，阻断合并 - 用
display: grid布局时，子项默认不参与外边距合并 - 注意：
Float和position: absolute虽也触发 BFC，但会破坏布局流，慎用
实际项目中，display: flow-root 是最干净的选择，语义明确且无副作用；但 IE 不支持，需按兼容性权衡。