gap是解决CSS元素间距混乱最直接有效的方式，适用于Flex和Grid布局中子元素间隙控制，可统一设置行列间距、响应式缩放及设计系统标准化，现代浏览器广泛支持。
用 gap 替代 margin/padding 手动调间距，是解决 CSS 项目中元素间距混乱最直接有效的方式。
gap 适合哪些场景
gap 是 Flexbox 和 Grid 布局的原生属性，专用于控制容器内子元素之间的**间隙**。它不作用于第一个和最后一个子元素的外侧，也不会影响子元素自身的 margin 或 padding，天然避免了“双边距重叠”“父子塌陷”等问题。
- Flex 容器（display: flex）中多个按钮、标签、卡片横向/纵向排列
- Grid 容器（display: grid）中网格项（grid items）的行列间距
- 响应式布局中需统一缩放间距（配合 rem/em 或 clamp）
怎么用 gap 替代零散的 margin
把原来靠给每个子元素写 margin-right / margin-bottom 控制间隔的方式，改成在父容器上统一设 gap。
- 横向间隙：用 gap: 0.5rem（等价于 row-gap: 0.5rem; column-gap: 0.5rem）
- 只设行或列：比如 row-gap: 1rem 控制上下间距，column-gap: 0.75rem 控制左右
- Flex 下注意主轴方向：若 flex-direction: column，gap 就是纵向间距；默认 row 则是横向
统一设计系统中的 gap 值
在项目根样式或设计令牌（design tokens）中定义一套有限的 gap 尺寸，比如：
立即学习“前端免费学习笔记（深入）”；
- --space-xs: 0.25rem
- --space-sm: 0.5rem
- --space-md: 1rem
- --space-lg: 1.5rem
然后所有容器统一使用：gap: var(--space-md)。这样既保证视觉一致性，也方便全局调整。
兼容性与降级处理
现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+）都已原生支持 gap（Flex & Grid）。如需兼容旧版 Safari（
- 对 Flex 容器加 display: -webkit-box 并搭配 -webkit-box-pack/-webkit-box-align（但 gap 不生效，需保留 margin 降级）
- 用 PostCSS 插件（如 postcss-gap-properties）自动补全老语法（效果有限，建议仅作兜底）
- 优先保障 Grid/Flex 场景使用 gap，传统流式布局仍用 margin，通过 CSS class 约束（如 .u-mb-sm）保持可控
基本上就这些。gap 不是万能的，但它让“间距管理”这件事从手动缝合变成声明式配置——不复杂但容易忽略。
