外边距叠加不是bug而是css规范行为，指垂直相邻块级元素的margin取最大值而非相加，典型场景包括兄弟元素间距合并、父子margin塌陷及空元素自合并，导致预期间距失效。
外边距叠加（Margin Collapsing）不是 bug，但会直接破坏你写的间距逻辑——尤其当你以为 margin-top: 20px + margin-bottom: 20px 能撑开 40px 间距时，实际只生效 20px。
兄弟元素间 margin-bottom 和 margin-top 合并
这是最常被误判的场景：两个相邻块级元素，一个设 margin-bottom: 32px，下一个设 margin-top: 16px，最终垂直间距不是 48px，而是 32px。
- 正数取大：32px 和 16px → 32px
- 一正一负：32px 和 -12px → 20px（代数和）
- 全为负：-24px 和 -16px → -24px（绝对值大的那个）
- 该行为只发生在普通文档流中的块级元素，
display: flex或display: grid子项完全不参与
父元素与第一个子元素的 margin-top 塌陷
父容器没 border、没 padding、没内容、没 BFC，子元素一设 margin-top: 40px，整个父容器就往下“掉” 40px，子元素在父容器内位置其实没变——视觉上像父容器被顶下去了。
- 本质是子元素的
margin-top穿透父容器边界，与父容器的“默认上边缘”合并 - 哪怕父容器写了
margin-top: 10px，只要没触发 BFC，也会和子元素的 40px 合并成 40px - 常见于卡片组件、文章段落嵌套、Modal 内容区等结构
空块级元素的上下 margin 自合并
一个空的 <div></div> 设了 margin: 20px，它不会占 40px 高度，而只占 20px——因为它的 margin-top 和 margin-bottom 直接合并了。
- 即使加了
height: 0或line-height: 0，只要没 border/padding/BFC，就会自合并 - 这种空元素常被用作分隔线或占位符，结果留白远小于预期
- 调试时容易误判为“样式没生效”，其实是合并后“看不见效果”
响应式断点下 margin 合并的隐性偏移
媒体查询里改字体大小或容器宽度，可能间接改变元素是否“相邻”或是否触发 BFC，导致原本稳定的间距突然跳变。
- 比如小屏下 Flex 容器换成了 Block，子项开始合并 margin
- 百分比 margin（如
margin-top: 5%）合并后参照的父宽可能已变化，结果不可控 - Bootstrap 的
mb-4在嵌套中可能失效，不是类没加载，是 margin 被父容器吞掉了 - 真正可靠的间距控制方式：用
gap（Flex/Grid）、统一只设margin-bottom、或给父容器加overflow: hidden/padding: 0.1px
最易被忽略的点：外边距叠加只看“是否紧邻”，不看有没有注释、换行符或空格——HTML 中两个 <div> 标签之间哪怕只有一行空白，只要没内容、没 border、没 padding，照样合并。写完布局一定要检查 DOM 结构是否真有隔离层。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
