gap必须用在display: flex或grid容器上才生效，否则浏览器静默忽略；常见错误是父容器为block等非flex/grid显示模式，或遗漏flex-wrap: wrap导致row-gap失效。
gap 能直接替代 margin 控制子项间距，但必须用在 display: flex 或 display: grid 容器上；否则写 gap 无效，浏览器静默忽略。
为什么直接给容器写 gap 却没效果
常见错误是父容器没设 display: flex 或 display: grid，比如仍为 display: block —— 此时 gap 属于无主属性，不生效。另外，gap 不继承、不作用于普通文档流，只对 Flex/Grid 的直接子项起效。
容易踩的坑：
- 父容器被其他样式覆盖（如
display: inline或display: contents），导致 Flex/Grid 失效 - 子项用了
display: none或visibility: hidden：前者完全不参与gap计算，后者仍占位并受gap影响 - 写了
gap: 12px，但同时又写了row-gap: 8px—— 后者会覆盖gap的行方向值
gap 在 Flex 布局中怎么避免换行后“行间距消失”
关键点在于：未启用 flex-wrap: wrap 时，row-gap（即 gap 的第一个值）不生效；只有多行时，它才控制行与行之间距离。
实操建议：
- 确保父容器有
flex-wrap: wrap，否则gap: 16px实际只等价于column-gap: 16px - 要精细控制，显式拆开写：
row-gap: 8px; column-gap: 16px，避免依赖单值语法的隐式行为 - 如果看起来“没行间距”，先检查容器高度是否足够撑开换行间隙——
align-content: flex-start不会取消row-gap，但容器太矮会让间隙不可见
响应式场景下 gap 怎么安全写，避开 Safari 14.0 兼容陷阱
Safari 14.0 及更早版本不支持双值 gap: 1rem 1.5rem，也不识别简写 gap，只认分开声明的 row-gap 和 column-gap。
稳妥做法：
- 放弃
gap: 12px 24px这类写法，统一用row-gap: 12px; column-gap: 24px; - 媒体查询中也保持拆分写法，例如：
@media (min-width: 768px) {<br> .container { row-gap: 16px; column-gap: 24px; }<br>} - 不要依赖
@supports (gap: 0)做降级判断——部分安卓 WebView 里该检测返回false，即使实际支持
和 margin 混用时，为什么间距突然变大还难调试
gap 和子项自身的 margin 是叠加关系，不是替换。比如容器设了 gap: 1rem，子项又有 margin: 1rem，那两个子项之间实际就是 2rem 空隙。
真正麻烦的是视觉错乱：
- 子项带
margin-right: 16px，最后一项右侧多出空白，而gap并不自动规避这个 - 用
:not(:last-child)清除 margin，在动态增删项或响应式换行后 DOM 顺序未变但视觉“末项”已变，伪类失效 - 推荐一步到位：
.container > * { margin: 0; }，所有间距交由容器gap或padding承担
最易被忽略的一点：gap 不影响容器边缘，所以别指望它代替 padding；首尾贴边问题，得靠容器自身 padding 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
