边距重叠（margin collapse）不是 bug，是 css 规范定义的默认行为；它指相邻块级元素的垂直外边距合并为较大值而非相加，常见于兄弟、父子及空元素间，可通过触发 bfc（如 overflow: hidden、display: flow-root）、使用 padding 替代 margin 或全局重置 margin 并单向控制来规避。
边距重叠（margin collapse）不是 bug，是 CSS 规范定义的默认行为；想让它不发生，就得主动打破触发条件——核心是让相关元素脱离“普通文档流中的相邻块级上下文”。
为什么两个 p 标签之间只显示 1em 间距？
浏览器默认给 p 同时设 margin-top: 1em 和 margin-bottom: 1em，而相邻 p 的垂直外边距会合并：取较大值，不是相加。所以连续多个 p，视觉间距永远是 1em，不是 2em、3em……
- 只设
margin-bottom，不设margin-top，从源头减少合并机会 - 确保父容器不参与合并——给它加
overflow: hidden或display: flow-root - 避免在
p外再套一层无样式空div，否则可能引入新的合并链
子元素 margin-top 把父容器顶上去怎么办？
这是父子间 margin 合并最典型的症状：子元素的 margin-top 没作用在自己身上，而是“穿透”到父元素顶部，导致整个父容器下移。
- 给父元素加
border-top: 1px solid transparent（最轻量，不影响视觉） - 或加
padding-top: 0.1px（比1px更稳妥，防某些缩放场景失效） -
overflow: hidden有效，但注意可能裁剪子元素的绝对定位内容 - 慎用
display: inline-block——它虽能阻止合并，但会引入额外的基线对齐空白
哪些 CSS 声明能可靠触发 BFC 阻止合并？
BFC（块格式化上下文）是真正从机制上隔离 margin 合并的方案，但不是所有声明都等效：
-
display: flow-root是现代首选，语义清晰、无副作用，兼容 Chrome 64+/Firefox 59+/Safari 15.4+ -
overflow: hidden兼容性最好，但要注意溢出内容会被裁剪 -
float: left或position: absolute虽然也创建 BFC，但会脱离文档流，布局影响大，不推荐仅为此目的使用 -
display: table-cell有效，但会强制变成表格单元格行为，容易引发意外交互
真正难处理的不是单个合并点，而是嵌套层级里多个合并同时发生——比如一个 section 里有 h2 + p + div，每个都带默认 margin，这时靠局部修复容易漏掉某一处。最稳的做法是全局重置 + 显式控制：用 * { margin: 0; } 清除默认，再按需给特定元素设 margin-bottom，而不是依赖浏览器默认值去修修补补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
