应优先使用容器级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 前缀。注意它只作用于**直接子元素之间**，不影响子元素内部结构，也不影响与容器边缘的距离。
常见误用：
立即学习“前端免费学习笔记（深入）”；
