gap不能替代margin，仅在display:flex或grid容器中生效；写在block等非flex/grid容器上无效，浏览器静默忽略。
gap 不能直接“替代” margin，它只在 display: flex 或 display: grid 容器中生效；写在 block 容器上完全无效，浏览器静默忽略。
为什么写了 gap 却没看到间距
这不是 bug，而是布局条件未满足：
- 父容器仍是
display: block（或被display: contents、display: inline覆盖） - Flex 容器漏了
flex-wrap: wrap，导致row-gap（即gap的第一个值）不生效 - 子项用了
display: none——它完全不参与 gap 计算；而visibility: hidden仍占位、仍受 gap 影响 - 同时写了
gap: 12px和row-gap: 8px，后者会覆盖前者的行方向值
gap 在 Flex 和 Grid 中的行为差异
同一句 gap: 16px 8px，含义不同：
- 在
display: grid中：等价于row-gap: 16px; column-gap: 8px（顺序是「行 列」） - 在
display: flex中：row-gap始终控制交叉轴（上下/左右），column-gap始终控制主轴（左右/上下），与flex-direction无关；未启用flex-wrap: wrap时，row-gap不起作用 - Grid 下
gap更稳——它不依赖子项是否换行、是否flex-shrink、是否隐藏，只要子项是直系子元素就生效
兼容性与降级：Safari 14.0 及更早版本怎么写才安全
Safari 14.0 不支持 gap: 12px 或 gap: 1rem 1.5rem，只认分开声明的 row-gap 和 column-gap：
- 稳妥写法始终是：
row-gap: 12px; column-gap: 12px; - 媒体查询里也保持拆分：
@media (min-width: 768px) { .container { row-gap: 16px; column-gap: 24px; } } - 别用
@supports (gap: 0)做降级判断——部分安卓 WebView 里该检测返回 true 但实际不渲染，或返回 false 却能用 - IE 全系不支持，必须回退到
margin+:not(:last-child)或 JS 动态补位
和 margin、padding 混用时最易翻车的点
gap 是轨道间的空白，它既不叠加 padding，也不抵消 margin，但三者共存时视觉效果会叠加：
- 子项自带
margin-right: 8px，容器又设gap: 16px→ 实际水平间距变成24px - 容器设了
padding: 20px，又设gap: 16px→ 第一行项目离顶部仍是20px，gap从第二行开始算 -
gap不影响子项与容器边缘的距离，想控制这个距离得靠padding或外层margin - 嵌套多层 Grid/Flex 时，每层
gap只作用于本层轨道，不会穿透——组件化开发中常误以为父组件的gap会影响子组件内部排列
真正难的不是写对 gap，而是当设计稿要求“第一组卡片间距 24px，第二组缩到 8px”时，得意识到 gap 是容器级统一控制——这种差异化间距，必须拆成两个独立容器，而不是试图用选择器去 hack 子项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
