gap能直接替代margin控制多栏间距，但仅在display:flex或display:grid容器中生效；若父容器为block/inline等传统布局，或flex容器未设flex-wrap:wrap，gap将被浏览器静默忽略。
gap 能直接替代 margin 控制多栏间距，但必须用在 display: flex 或 display: grid 容器上；否则写 gap 无效，浏览器静默忽略。
为什么写了 gap 却没效果
最常见原因是父容器没启用现代布局模式：
- 父容器仍是
display: block、display: inline或被其他样式覆盖（比如display: contents） - Flex 容器漏了
flex-wrap: wrap，导致row-gap（即gap的第一个值）不生效 - 同时写了
gap: 12px和row-gap: 8px，后者会覆盖前者的行方向值 - 子元素用了
display: none—— 它完全不参与gap计算；而visibility: hidden仍占位、仍受gap影响
gap 在 grid 和 flex 中的行为差异
同一句 gap: 16px 8px，在不同容器里含义不同：
- 在
display: grid中：等价于row-gap: 16px; column-gap: 8px（顺序是「行 列」） - 在
display: flex中：row-gap始终控制交叉轴（上下/左右），column-gap始终控制主轴（左右/上下），与flex-direction无关；未启用flex-wrap时，row-gap不起作用 - Grid 下
gap更稳——它不依赖子项是否换行、是否flex-shrink、是否隐藏，只要子项是直系子元素就生效
兼容性与降级处理的关键点
IE 全系不支持 gap，旧版 Safari（≤14.0）只认 row-gap/column-gap 分开写，且不支持简写语法 gap：
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法是显式声明：
row-gap: 12px; column-gap: 12px;，比单写gap: 12px兼容性更好 - 不要只靠
@supports (gap: 1rem)做判断——某些安卓 WebView 或旧 Safari 里，@supports本身返回true但实际不渲染 - 若必须兼容 IE，只能回退到
margin+:not(:last-child)或 JS 动态计算，但要注意margin垂直方向会合并、首尾多出空白
和 padding、margin 混用时容易踩的坑
gap 是轨道间的空白，它既不叠加 padding，也不抵消 margin，但三者共存时视觉效果会叠加：
- 容器设了
padding: 20px，又设gap: 16px→ 第一行项目离顶部仍是 20px，gap从第二行开始算 - 子项自己带
margin-right: 8px，容器又设gap: 16px→ 实际水平间距变成 24px -
gap不影响子项与容器边缘的距离，想控制这个距离得靠padding或外层margin
真正难处理的是嵌套多层 Grid/Flex：每层 gap 只作用于本层轨道，不会穿透。组件化开发中，常误以为父组件的 gap 会影响子组件内部排列——其实它完全不影响，这点必须手动确认层级关系。
