gap仅在Flex和Grid布局中生效，可统一控制列/行间距；在block或float中无效；混用margin会导致间距叠加；IE不支持，需用@supports降级或改用calc()/JS。
gap 能直接解决列间距不一致问题，但只在 Flex 和 Grid 布局中生效
很多开发者试图在 display: block 或 float 布局里用 gap，结果完全没效果——gap 是 CSS Grid 和 Flexbox 的专属属性，对普通流式布局无效。如果你的容器是 display: flex 或 display: grid，直接加 gap 就能统一控制列/行间距，无需额外计算。
常见错误现象：gap: 16px 写了但列间距看起来还是不均等，大概率是因为子元素设置了 margin，和 gap 叠加导致视觉错乱。
-
gap作用于容器，自动处理相邻子项之间的空隙，不涉及首尾外边距 - Flex 布局中，
gap同时影响主轴（row-gap）和交叉轴（column-gap），也可单独设置row-gap或column-gap - Grid 布局中，
gap对行列都起作用，且支持响应式写法，比如gap: 1rem 2rem
用 margin 统一列间距时，必须规避首尾元素的额外外边距
当布局不支持 gap（比如老项目用 inline-block 或兼容 IE），靠 margin 模拟列间距是最常用手段，但容易让第一列左边、最后一列右边多出空白，破坏对齐。
典型错误写法：.item { margin-right: 16px; } —— 最后一项也会带 margin-right，右侧溢出。
- 推荐用
:not(:last-child)排除末项：.item:not(:last-child) { margin-right: 16px; } - 或者用
margin-left+:not(:first-child)，逻辑更清晰，尤其适合 RTL 场景 - 若子项宽度固定且容器有明确宽度，用
calc()配合margin容易失算，不如改用gap或重构成 Grid/Flex
Flex 布局下 gap 和 margin 混用会引发意外叠加
有人为了“保险”同时写 gap 和 margin，结果列间距变成两者之和。比如 gap: 12px + margin-right: 8px，实际间距可能达到 20px，且首尾仍有多余 margin。
关键判断点：只要用了 display: flex 或 display: grid，就该把间距逻辑全部交给 gap，子项内部如需留白，改用 padding。
-
gap不会与子项的margin合并，而是独立插入在元素之间 - 子项设
margin会导致它自身偏移，可能撑开容器或破坏居中 - 调试时可临时加
outline: 1px solid red看真实间隙归属，区分是gap还是margin产生的
IE 兼容场景下 gap 不可用，需 fallback 到 margin + calc 或 JS 补偿
gap 在 IE 中完全不支持，哪怕加前缀也无效。如果项目还需兼容 IE11，不能只依赖 gap。
简单 fallback 方案：@supports not (gap: 0) 包裹 margin 规则；复杂布局建议直接降级为 display: table 或用 calc() 计算每列宽度与 margin。
-
calc(33.333% - 10px)类写法需确保总列数和 gap 值精确对应，列数变化时维护成本高 - 用 JS 动态计算 margin 并注入 style，仅建议用于小范围、非 SSR 场景
- 真正稳定的方案是升级布局模型：用 Autoprefixer + PostCSS 插件将 Grid/Flex 自动补全，再配合
@supports分层控制
实际布局中，列间距不一致往往不是参数设错了，而是布局模型和间距控制权没理清——gap 管容器内间隙，margin 管元素自身位置，混用时边界最易模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
