外边距重叠不是bug，是css规范定义的垂直相邻块级元素在普通流中margin取较大值的行为；父子间因无border/padding导致子元素margin-top穿透父容器使其下移，根本原因是父元素未形成bfc；首选display:flow-root创建bfc解决，备选overflow:hidden或改用flex/grid+gap。
外边距重叠（margin collapse）不是 bug，是 CSS 规范明确要求的行为；它只发生在普通流中垂直方向的块级元素之间，无法靠“删掉一个 margin”根除——必须从格式化上下文或布局模型层面干预。
父子嵌套时子元素 margin-top 把父元素顶下去了
这是最常被误认为“bug”的场景：父容器没 border/padding/content，子元素 margin-top 直接穿透到父级外部，导致父容器整体下移。
- 根本原因是父元素未形成 BFC（块级格式化上下文），子元素的上外边距与父元素的上外边距发生合并
-
display: flow-root是首选解法：.parent { display: flow-root; }——语义清晰、无副作用、不干扰定位和阴影 - 备选方案：
overflow: hidden也有效，但要注意可能意外裁剪position: absolute子元素或box-shadow - 避免用
padding-top: 1px或border-top: 1px solid transparent，它们会改变盒模型尺寸，在width: 100%或 flex/grid 中易引发宽度溢出
相邻兄弟元素间距总是取 max 而非 sum
比如 .item1 { margin-bottom: 20px; } + .item2 { margin-top: 30px; }，实际间距只有 30px，不是 50px。
- 这不是错误，而是浏览器按规范合并后的结果；段落间默认紧凑排版就依赖这个行为
- 若需精确控制间距，放弃双方向 margin，统一只设
margin-bottom（或只设margin-top），并确保最后一个元素清空该 margin - 更现代的做法是改用
display: flex; flex-direction: column; gap: 20px;——gap不参与 margin 合并，且支持响应式单位如gap: clamp(8px, 2vw, 16px) - 慎用
inline-block：虽能阻止合并，但会引入看不见的空白字符间隙，需要额外处理
空 div 自身 margin-top 和 margin-bottom 合并成一个值
一个空的 <div></div> 设了 margin: 20px，实际只显示一个 20px 的空白，而不是上下各 20px。
- 这是自身合并（self-collapse），触发条件是：无内容、无 border、无 padding、无 height
- 最直接的破局方式是加一行不可见内容：
<div> </div>，或用伪元素：div::before { content: ""; display: block; } - 如果该元素本就该“占位”，不如改用
height: 20px或min-height: 20px，语义更准确，也不依赖 margin 行为 - 不要试图用
visibility: hidden或opacity: 0解决——它们不改变盒模型，合并照旧
真正容易被忽略的点是：外边距合并只对普通流中的块级元素生效。一旦用了 flex、grid、float 或 position: absolute，它就自动失效——但这不意味着问题消失，而是换成了别的布局逻辑。所以别纠结“怎么关掉 collapse”，先确认你用的是不是最适合当前场景的布局模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
