gap-4 在 flex 容器中比 margin 更干净，因其为容器级间距控制，仅作用于相邻子项间，不触发外边距合并、不干扰对齐、无需首尾排除；手动 margin 易在换行、响应式或动态增删时出错。
gap-4 在 Flex 容器中为什么比 margin 更干净
因为 gap 是容器级控制，只作用于相邻子项之间，不触发外边距合并、不干扰对齐逻辑、也不需要给首尾元素额外排除样式。而手动加 margin-right 或 margin-bottom，很容易在换行、响应式折叠、或动态增删子项时出错。
- Flex 容器必须显式声明为
flex或inline-flex，gap才生效（CSS Grid 也支持，但这里只谈 Flex） -
gap-4对应的是gap: 1rem，不是所有旧浏览器都支持——Safari 14.1+、Chrome 84+、Firefox 63+ 起才稳定可用 - 如果子项本身有
margin，gap和margin会叠加，不是替代关系；想彻底统一间距，得先清掉子项的margin
用 gap-4 时遇到子项没间距？检查这三点
最常见现象是加了 gap-4 但视觉上完全没变化，大概率卡在这几个地方：
- 父容器没加
flex类——gap在 block 流里无效，必须是flex/inline-flex/grid - 子项用了
flex-shrink-0或固定宽高，导致容器没空间“撑开”间隙（尤其在窄屏下），gap仍存在，但被压缩到不可见 - 用了
flex-wrap且子项换行，gap只管行内和行间，不管“最后一行末尾到容器右边缘”的距离——那块空白不是gap管的
gap-4 和 margin-x-4 的行为差异真实例子
假设三个 div 水平排列：
<div class="flex gap-4"> <div>A</div> <div>B</div> <div>C</div> </div>
等价于两处 1rem 间隙：A-B 之间、B-C 之间，共 2rem 总间隙。
如果改用 margin-right-4：
<div class="flex"> <div class="mr-4">A</div> <div class="mr-4">B</div> <div>C</div> </div>
问题来了：C 右侧多出 1rem 空白（来自 B 的 mr-4），而且一旦 C 被移除，B 的 mr-4 就变成“悬空边距”，容易撑开容器或影响对齐。
兼容性兜底方案：什么时候该放弃 gap-4
如果你的项目必须支持 Safari gap 会被直接忽略，此时不能只靠 gap-4。
- 安全做法是双写：
gap-4+ 手动给子项加mr-4 last:mr-0（注意last:*在 Tailwind v3.0+ 才支持） - 更稳但略啰嗦：用
flex flex-col+space-y-4（垂直方向无兼容问题，且space-y是 Tailwind 自己用margin-top实现的，兼容性好得多） - 别依赖
gap做关键布局对齐——比如卡片网格中想靠gap控制列间距，又同时要适配 IE，那就得切回grid或 JS 补偿
gap 的语义是“容器内项间空隙”，不是“子项外边距”。理解这点，很多奇怪表现就自然解开了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
