用 gap 和 flex 布局替代 margin 实现可靠间距，gap 规避塌陷与透传，flex 统一管理排列与间距，嵌套时用 BFC 隔离 margin 影响。
盒模型嵌套时，子元素的 margin 会和父容器或兄弟元素产生意外的叠加、塌陷或透传，导致间距“不听使唤”。与其反复调试 margin、overflow:hidden 或 zoom 等 hack 方案，不如从布局层面换种思路：用 gap 和 flex 布局 主动定义间距，让间距成为容器的“内置属性”，而非子项的“副作用”。
用 gap 替代 margin 实现可靠间距
gap 是 flex 和 grid 容器的原生属性，专为控制子项间隙设计，完全规避 margin 塌陷和父子穿透问题。它只作用于容器内部，不触发重排干扰，语义清晰且可继承响应式值。
- 在 flex 容器中写 gap: 12px，所有相邻子项间自动保持 12px 间距，无需给每个子项设 margin
- 支持分别设置方向：row-gap: 8px; column-gap: 16px
- 可配合媒体查询动态调整：@media (max-width: 768px) { gap: 6px; }
- 注意：IE 不支持 gap，如需兼容，可用 display: grid + @supports 检测降级
用 flex 布局统一管理排列与间距逻辑
把原本靠浮动、inline-block 或绝对定位拼凑的嵌套结构，改为由一个 flex 容器统筹子项的对齐、顺序和间距，能从根本上减少 margin 的使用场景。
- 将“按钮组”“标签栏”“卡片列表”等线性结构的外层设为 display: flex，再用 justify-content / align-items 统一控制位置
- 子项无需设 margin-left/right —— 改用 gap 更安全；若需首尾留白，用 padding 替代 margin
- 避免对 flex 子项设 margin-top/bottom（尤其在 align-items: center 时易引发错位），优先用 padding 或 gap
遇到必须嵌套的场景？隔离 margin 影响范围
当无法避免深层嵌套（比如第三方组件包裹、遗留代码）时，可通过“容器收口”方式阻断 margin 透传：
立即学习“前端免费学习笔记（深入）”；
- 给直接承载子项的父容器加 overflow: hidden 或 padding: 0.1px，防止 margin 塌陷向上冒泡
- 用 display: flow-root 创建新的 BFC，比 overflow 更语义化且无副作用
- 关键原则：margin 只用于“视觉分隔”的最后一层，上层嵌套尽量用 padding 或 gap 承担空间职责
基本上就这些。gap + flex 不是万能银弹，但对绝大多数列表、表单、工具栏类布局，它让间距变得可预测、可维护、少踩坑。与其和 margin 塌陷死磕，不如让容器自己管好间距。
