gap 间距属性

最后更新：2026-09-13

gap gap 间距属性

gap 属性用于设置弹性或网格布局中行与列之间的间距，是 row-gap 和 column-gap 的简写形式。它只在项目之间产生间距，不会在容器边缘添加额外空间，比使用 margin 更简洁可控。该属性让布局间距的管理更加直观，避免了传统 margin 方案中首尾元素需要额外清除间距的麻烦。

分类
初始值	normal
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

gap: normal | <length> | <percentage>;

⚙️ 取值

值	类型	描述
`normal`	关键字	默认间距
`<length> \| <percentage>`	类型	行与列间距

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
gap	✓ v66	✓ v16	✓ v61	✓ v10.1	✓ v53
所有主流浏览器均支持

提示： gap 的两个值分别表示 row-gap 和 column-gap，例如 gap: 10px 20px 表示行间距 10px、列间距 20px。只写一个值则行列间距相同。

重要： gap 仅在弹性布局（Flexbox）和网格布局（Grid）中生效，普通块级布局中不产生效果。如需在块级元素间添加间距，应使用 margin。

❓ 常见问题

Qgap 和 margin 有什么区别？

Agap 只在项目之间产生间距，不会在容器边缘添加空间，无需清理首尾间距；margin 在元素四周都产生空间，需要额外处理首尾元素的 margin，还可能与 flex 或 grid 的尺寸计算互相影响。布局间距优先用 gap，margin 用于元素与外部元素之间的空隙。

Qgap 的浏览器兼容性如何？

Agap 在 flex 布局中自 Chrome 84、Firefox 63、Safari 14.1 起全面支持，在 Grid 布局中支持更早（Chrome 66+、Safari 12+）。需要兼容更老的浏览器时，可先用 margin 实现间距作为降级，再用 @supports (gap: 1px) 特性检测覆盖为新语法。

Qgap 和 grid-gap 有什么区别？为什么现在推荐用 gap？

Agrid-gap 是早期仅适用于网格的语法（含 grid-row-gap、grid-column-gap），后规范把 gap 扩展为同时适用于 flex、Grid 和多列布局并正式更名。gap 是 row-gap 与 column-gap 的简写。现代浏览器均支持，grid-gap 属旧写法，新代码统一用 gap。