gap优先于margin，因其是布局层原生属性，只作用于项目之间、不参与盒模型计算、不触发margin折叠、不撑宽容器，且语义清晰、响应式友好、维护成本低。
Flex 布局中用 gap 替代子元素的 margin 来管理留白，是更干净、可控的做法——它专为容器内项目间距设计，不触发 margin 折叠，也不影响容器边界。
为什么优先用 gap 而不是 margin
gap 是 Flex（和 Grid）原生支持的布局级间距控制属性，作用对象是“项目之间”，而非项目自身。这意味着：
- 父容器设
gap: 12px，4 个子项会自动产生 3 处 12px 的水平空隙，逻辑清晰； - 子项无需写
margin-right或margin-bottom，避免多层 margin 叠加（比如父容器 gap + 子项 margin 同时存在，空白翻倍）； - gap 不会外溢，不参与文档流计算，不会导致父容器宽度撑开或换行异常。
gap 的写法与常见组合
gap 支持简写和拆分写法，按需选择：
-
gap: 12px—— 行距列距均为 12px； -
gap: 8px 16px—— 先写row-gap（垂直间距），再写column-gap（水平间距）； -
row-gap: 6px; column-gap: 10px;—— 分开写最明确，尤其适合行列间距不同的场景（如图文卡片列表）。
注意：Flex 容器启用 gap 后，应主动清空子项的 margin，例如把 .item { margin-right: 10px; } 改为 .item { margin: 0; }，再靠父容器的 column-gap 统一控制。
兼容性处理：iOS 旧版 Safari 的 gap 降级方案
iOS 14.5 以下 Safari 不支持 gap（部分需加 -webkit-gap）。若需兼容，可用「负 margin + padding」抵消法模拟：
- 父容器加
margin: 0 -5px（假设目标 gap 是 10px，则取一半）； - 子项加
padding: 0 5px 10px（左右各 5px 模拟水平 gap，底部 10px 模拟垂直 gap）； - 父容器保留原有
padding（如顶部/底部留白），不被抵消。
这样视觉效果与 gap: 10px 一致，且所有 iOS 版本都可渲染。
别忘了关闭干扰项
实际项目中，这些细节常让 gap “失效”或留白异常：
- 检查是否全局重置了样式（如
* { margin: 0; padding: 0; }），导致<ul></ul>、<h2></h2>等自带间距消失，误以为 gap 没起作用； - 确认没在子项上误设
vertical-align或过大line-height，这类行内表现会额外增加上下空白，DevTools 中不可见，却占空间； - Flex 容器若设了
flex-wrap: wrap，gap 在多行间同样生效，但align-content会影响行与行之间的对齐位置，必要时配合调整。
