应优先使用容器级gap控制间距，Flex/Grid中用gap替代margin可避免折叠、错位等问题；仅在不对称间距、嵌套内层、动态插入等场景才需回退margin。
margin 不能解决所有间距问题，尤其在 Flex/Grid 容器里
直接给子元素加 margin 看似简单，但在 Flex 或 Grid 布局中容易引发意外：比如首尾元素多出空白、响应式断点下 margin 叠加错乱、或者被父容器的 overflow: hidden 切掉。更关键的是，margin 属于单个元素的外边距，它不参与容器的“整体间距分配”逻辑。
真正该优先考虑的是容器级间距控制：
- Flex 容器用
gap（支持row-gap/column-gap） - Grid 容器用
gap（同样支持行列拆分） - 普通块流仍可用
margin，但推荐统一用margin-bottom避免上下双倍间距
gap 在 Flex 中的兼容性和行为细节
gap 在 Flex 布局中从 Chrome 104 / Firefox 103 / Safari 16.4 开始稳定支持，旧版 Safari（≤16.3）需加 -webkit-gap 前缀。注意它只作用于**直接子元素之间**，不影响子元素内部结构，也不影响与容器边缘的距离。
常见误用：
立即学习“前端免费学习笔记（深入）”；
- 给 Flex 子项单独设
margin来模拟 gap —— 这会破坏 Flex 的对齐逻辑，尤其justify-content: center下子项位置偏移 - 在
flex-direction: column时误以为gap会压缩容器高度 —— 实际上它只是插入空白，容器高度自动撑开 - 用
gap: 1rem后发现 IE 完全失效 —— IE 不支持gap，必须降级为margin+:not(:first-child)选择器
什么时候必须退回 margin？
三种典型场景绕不开 margin：
- 需要**不对称间距**：比如左侧 0、右侧 12px，
gap是双向等距的，只能靠margin-right - **嵌套布局中跨层级控制**：父容器是 Grid，某个子项内部是文字+图标，图标需紧贴文字右侧 4px —— 这属于子项内部布局，
gap够不到 - **动态插入元素时的边界处理**：JS 动态追加 DOM，希望新元素和前一个保持间距，但又不想重绘整个容器 —— 直接给新元素加
margin-top最可控
此时可组合使用：gap 控制主轴规律间距，margin 处理特殊偏移或内层微调。
避免 margin 折叠的经典陷阱
相邻块级元素的垂直 margin 会合并（collapse），比如两个 p 标签分别设 margin-bottom: 20px 和 margin-top: 16px，实际间距是 20px 而非 36px。这在 CSS 重置或组件化开发中极易被忽略。
可靠解法：
- 用
padding替代父容器内的子元素margin（如给列表项父容器设padding-block） - 触发 BFC：给父容器加
overflow: hidden或display: flow-root - Flex/Grid 容器天然不发生 margin 折叠 —— 所以只要把布局容器设为
display: flex或grid，子项的margin就按预期生效
gap 本身完全规避了折叠问题，但它只存在于容器层面；真正难缠的，永远是那些没被纳入现代布局模型的老式块流元素。
