gap是首选解法，因其天然免疫外边距合并、值稳定、支持响应式单位且语义化；若用margin则须单向设置并配合:last-child清零，避免合并副作用。
直接用 gap 替代 margin 是最省心、最可靠的做法；如果必须用 margin，就只设单向边距，并配合 :last-child 或 :first-child 清零——其他方案要么有副作用，要么治标不治本。
为什么 gap 是首选解法
Flex 和 Grid 容器的直接子元素之间不会发生外边距合并，这是布局模型层面的隔离，不是“绕过”，而是天然免疫。而 gap 是为此设计的语义化间距控制方式：
-
gap值稳定：不会因插入/删除元素而意外改变间距（margin合并会随兄弟数量动态变化） - 支持响应式单位：
gap: 1rem、row-gap: clamp(0.5rem, 2vw, 1.2rem)都能正常工作 - 仅对直接子元素生效：嵌套一层
div就会让内部子项重新进入普通流，此时仍需单独处理 - 注意：
display: flex默认是单行，若需多行等距，请加flex-wrap: wrap并用gap控制行间与项间间距
单向 margin 的实操写法
放弃“上面设 margin-bottom、下面设 margin-top”这种双向控制，统一方向后，合并就无从发生：
- 推荐统一用
margin-bottom：.item { margin-bottom: 20px; }+.item:last-child { margin-bottom: 0; } - 若内容由 JS 动态渲染，确保末项确实匹配
:last-child（比如父容器里不能混入注释节点或文本节点） - 避免在同个列表中混用
margin-top和margin-bottom：哪怕只有一处，也会让整组兄弟元素重新进入合并判定逻辑 - 该方案兼容性极好，IE8+ 全支持，且无需新增 DOM 结构或触发 BFC
慎用 overflow: hidden 阻断合并
它确实能创建 BFC，阻止父子或兄弟间的外边距合并，但副作用太具体、太隐蔽：
- 会裁剪
position: absolute子元素超出部分（如下拉菜单、Tooltip、阴影），且无法通过z-index补救 - 影响滚动锚点行为（
scroll-behavior: smooth可能失效，尤其在 Safari 中） - 若父容器本身有圆角（
border-radius），裁剪还可能破坏视觉一致性 - 更轻量的替代：用
display: flow-root（Chrome/Firefox/Safari ≥15.4 全支持），或加border-top: 1px solid transparent（成本几乎为零，IE 也认）
真正容易被忽略的边界条件
外边距合并只发生在「普通文档流中的块级元素」之间。这个前提看似简单，但实际踩坑点密集：
-
display: inline-block元素虽然脱离了纯块流，但依然参与垂直外边距合并（很多人误以为它能解决） -
float或position: absolute虽然能跳出流，但会引发新布局问题（如父容器高度塌陷），需额外清理 - 空
<div></div>自身上下margin也会合并——这点常被忽略，导致页面莫名多出空白 - 所有方案都只对当前层级有效；嵌套结构中，每一层都要独立判断是否需要隔离，不能指望父级一设就全局生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
