这是CSS规范定义的外边距合并行为：垂直相邻块级元素的margin不叠加而取较大值；触发需满足普通文档流、垂直相邻、无border/padding等隔断；父子间也会合并。
为什么两个相邻块级元素的 margin 会“消失”一个
这不是 bug，是 CSS 规范明确规定的外边距合并（margin collapsing）行为：当两个垂直方向上的相邻块级元素（比如 div）的 margin-top 和 margin-bottom 直接接触时，它们不会叠加，而是取其中较大的那个值。
常见错误现象：
你给第一个 div 设了 margin-bottom: 20px，第二个设了 margin-top: 30px，结果两者之间只空了 30px，不是预期的 50px。
触发条件很具体：
• 必须是**普通文档流中的块级盒子**
• 必须**垂直相邻**（中间不能有 border、padding、inline content、clearance 等隔断）
• 父子间也会合并（比如父容器没 padding/border，子元素的 top margin 会“冒出来”）
overflow: hidden 真的能阻止合并？怎么用才安全
可以，但原理不是“修复 margin”，而是让容器生成一个新的**块格式化上下文（BFC）**，而 BFC 的边界会阻止内部子元素的 margin 与外部元素合并。
立即学习“前端免费学习笔记（深入）”；
实操建议：
• 给**父容器**设置 overflow: hidden（或 auto、scroll）是最常用手段
• 不要只为了防合并而滥用 overflow: hidden——它可能意外裁剪内容或影响滚动行为
• 在 Flex 或 Grid 容器中，子项默认不参与外边距合并，所以换布局也是解法之一
示例：
.parent { overflow: hidden; }<br>.child { margin: 20px 0; }此时两个 .child 之间的垂直间距就是 40px（各自 margin 不再合并）
加 border 或 padding 为什么也管用
因为外边距合并发生的前提是“相邻且无隔断”。只要在两个 margin 之间插入任何非空的**border、padding、inline 内容、甚至伪元素**，合并就立即失效。
使用场景：
• 调试时快速验证是否是合并导致的问题，加个 border: 1px solid transparent 就行
• 实际项目中，如果已有 padding 或 border 设计，顺手就能规避问题
• 注意：padding: 0 或 border: none 不算“隔断”，必须是渲染出来的盒模型边界
容易踩的坑：
• 给子元素加 border 只能解决它和兄弟元素的合并，解决不了它和父容器的父子合并
• outline 不属于盒模型，不能阻止合并
哪些方法看起来像解法，其实靠不住
有些写法看似合理，但在特定条件下会失效或引入副作用：
• display: inline-block：会让元素脱离块流，虽可避免合并，但会带来空白符间隙、vertical-align 对齐问题
• float：同样脱离文档流，影响后续布局，且需清除浮动
• position: absolute：完全脱离流，不再参与 margin 计算，但失去原本的布局语义
• 只改 margin 值（比如全用 margin-bottom）：治标不治本，父子合并仍存在，响应式下容易露馅
真正稳定的做法，始终围绕两点：创建 BFC（overflow / display: flow-root / contain: layout），或插入物理隔断（border / padding）
最易被忽略的是父子合并——它不总在视觉上明显，却常导致页面顶部“莫名多出空白”，检查时得从父容器开始看有没有 border/padding/overflow 设置
