CSS外边距合并是规范定义的正常行为，发生在垂直相邻块级元素间，取最大值而非相加；常见于兄弟、父子及空元素自身，可通过gap、BFC或padding阻断。
为什么组件间 margin 会“污染”布局
不是 margin 本身有问题，而是它在块级元素垂直方向上会自动合并（collapse）——两个相邻组件都设 margin-bottom: 16px，实际只生效一个 16px，而不是预期的 32px。这种“消失”的间距会让 UI 排版错位，尤其在卡片列表、表单字段组里特别明显。
用 padding 替代组件根元素的 margin
组件自身不该决定和外部的“社交距离”，那是父容器的事。把原本写在组件根元素上的 margin 拆出来，统一交给布局容器控制：
- 删掉
.card { margin-bottom: 24px; } - 改用父级 flex 容器加
gap: 24px，或 grid 加row-gap: 24px - 组件内部只用
padding管理呼吸空间：比如.card__header { padding-bottom: 12px; }
gap 不会折叠，也不依赖兄弟元素是否存在 border/padding，是最干净的解法。
必须全局重置 box-sizing 才能稳住 margin 行为
如果组件用了 box-sizing: content-box（默认值），width: 100% + padding + border 就会撑破容器，间接导致 margin 计算错乱。所有项目入口 CSS 必须有：
立即学习“前端免费学习笔记（深入）”；
* {
box-sizing: border-box;
}第三方库（如 Ant Design）通常已设好，但你写的自定义组件若漏了这句，margin 就可能在响应式断点里突然失效。
当真要保留 margin，如何避免折叠
某些场景绕不开 margin（比如兼容旧代码或 SSR 静态 HTML），那就得主动阻断折叠：
- 给其中一个元素加
padding: 0.1px（比border: 1px solid transparent更轻量） - 用
display: inline-block或float: left（不推荐，仅作兜底） - 确保至少一方是 BFC 触发元素：
overflow: hidden、display: flow-root
最易被忽略的是：子组件设了 margin-top，父组件没设 padding-top，结果外边距直接“穿出”父容器顶部——这不是 bug，是 CSS 规范行为，得靠结构约束来防。
