DigitalOcean 为您旅程的每个阶段提供云产品。开始使用 200 美元的免费信用额度!
CSS 中的 gap 属性是 row-gap
和 column-gap
的简写,用于指定槽的尺寸,即 网格、弹性盒 和 多列 布局中行和列之间的空间。
/* Grid layout */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 1fr;
gap: 30px 20px;
}
/* Flex layout */
.container {
display: flex;
gap: 10%;
}
/* Multi-column layout */
.container {
column-count: 5;
gap: 20px;
}

使用下面演示中的滑块查看 gap
属性的实际效果
语法
gap
接受一个或两个值
- 单个值将
row-gap
和column-gap
都设置为相同的值。 - 使用两个值时,第一个值设置
row-gap
,第二个值设置column-gap
。
.container {
gap: 1rem;
/* Is equivalent to:
* row-gap: 1rem;
* column-gap: 1rem
*/
gap: 10px 15%;
/* Is equivalent to:
* row-gap: 10px;
* column-gap: 15%;
*/
}
CSS 网格布局模块的规范使用 grid-gap
属性定义网格轨道之间的间距。gap
旨在替换它,以便可以在多种 CSS 布局方法(如弹性盒)中定义间隙,但 grid-gap
仍需要在浏览器可能已实现 grid-gap
但尚未开始支持较新的 gap
属性的实例中使用。
值
gap
接受以下值
normal
:(默认)浏览器将为多列布局指定 1em 的使用值,为所有其他布局上下文(即网格和弹性盒)指定 0px。<length>
:任何有效且非负的 CSS 长度,例如px
、em
、rem
和%
等。<percentage>
:间隙的大小,相对于元素尺寸的非负百分比值。(有关详细信息,请参见下文。)initial
:应用属性的默认设置,即normal
。inherit
:采用父级的 gap 值。unset
:从元素中删除当前的gap
。
gap 属性中的百分比
当间隙维度中容器的大小确定时,gap
会根据任何布局类型中容器内容框的大小来解析百分比。

换句话说,当浏览器知道容器的大小后,它就可以计算出 gap
的百分比值。例如,当容器的高度为 100px 且 gap
设置为 10% 时,浏览器知道 100px 的 10% 是 10px。
但是,当浏览器不知道大小的时候,它会想,“10% 的什么?”在这些情况下,gap
的行为会根据布局类型而有所不同。
在网格布局中,百分比解析为零以确定内在尺寸贡献,但在布局框内容时解析为元素的内容框,这意味着它将在项目之间放置空格,但空格不会影响容器的大小。
在此演示中,容器的高度是不确定的。查看增加 gap
大小时会发生什么情况。然后以像素单位设置 gap
并再次尝试
在弹性盒布局中,百分比在所有情况下都解析为零,这意味着当浏览器不知道容器大小时,间隙将不适用
将 calc() 函数与 gap 一起使用
您可以使用 calc()
函数 指定 gap
的大小,但在撰写本文时,Safari 和 iOS 上不支持它。
.flex-layout {
display: flex;
gap: calc(5vh + 5px) calc(5vw + 5px);
}
.grid-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(5vmin + 5px);
}
示例
gap
属性旨在用于网格、弹性盒和多列布局。让我们看看一些示例。
网格布局
在以下演示中,您可以看到 gap
用于在网格容器上指定 row-gap
和 column-gap
属性,分别定义网格行和网格列之间的槽。
弹性盒布局
将 gap 应用于弹性盒容器的主轴表示在弹性盒布局的单行中**弹性盒项目之间**的间距。
这是在行方向上使用的 column-gap
这是在列方向上使用的 row-gap
将 gap
应用于弹性盒容器的交叉轴表示在弹性盒布局的**弹性盒行之间**的间距。
这是在行方向上使用的 row-gap
这是在列方向上使用的 column-gap
多列布局
column-gap
出现在 多列 布局中,用于在列框之间创建间隙,但请注意,row-gap
没有效果,因为我们只在列中工作。gap
仍然可以在此上下文中使用,但只会应用 column-gap
。
正如您在下一个演示中看到的,尽管 gap
属性的值为 2rem,但它只在水平方向上分隔项目,而不是两个方向,因为我们只在列中工作
您可能还想知道…
关于使用 gap
属性,有几点需要注意。
它是一种防止不需要的间距的好方法
您是否曾经使用过边距在元素之间创建间距?如果我们不小心,最终可能会在项目组之前和之后出现额外的间距。
解决此问题通常需要添加负边距或使用伪选择器删除特定项目的边距。但是,在更现代的布局方法中使用 gap
的好处在于,您只会在项目之间有间距。开头和结尾的额外杂物永远不会成为问题!
但是,嘿,如果您希望在使用 gap
的同时在项目周围留出空间,请像这样在容器周围放置 padding
.container {
display: flex;
gap: 1rem;
padding: 1rem;
}
间隙大小并不总是等于 gap 值
gap
属性并不是唯一可以为项目之间添加间隙的属性。边距、填充、justify-content
和 align-content
也会增加间隙的大小并影响实际的 gap
值。
在下面的示例中,我们设置了 1em 的 gap
,但正如你所看到的,项目之间有更大的间隙,这是由于使用了分布式对齐方式(如 justify-content
和 align-content
)造成的。
浏览器支持
特性查询通常是检查浏览器是否支持特定属性的好方法,但在这种情况下,如果你在弹性盒布局中检查 gap
属性,你可能会得到一个误报,因为特性查询不会区分布局模式。换句话说,它可能在弹性盒布局中受支持,这会导致结果为正,但如果它在网格布局中使用,则实际上不受支持。
网格布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
不支持 | 16+ | 61+ | 66+ | 12+ | 53+ |
iOS Safari | Opera Mobile | Android 浏览器 | Chrome for Android | Firefox for Android |
---|---|---|---|---|
12+ | 不支持 | 81+ | 84+ | 68+ |
使用 calc() 值的网格布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
不支持 | 84+ | 79+ | 84+ | 不支持 | 69+ |
iOS Safari | Opera Mobile | Android 浏览器 | Chrome for Android | Firefox for Android |
---|---|---|---|---|
不支持 | 不支持 | 81+ | 84+ | 68+ |
使用百分比值的网格布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
不支持 | 84+ | 79+ | 84+ | 不支持 | 69+ |
iOS Safari | Opera Mobile | Android 浏览器 | Chrome for Android | Firefox for Android |
---|---|---|---|---|
不支持 | 不支持 | 81+ | 84+ | 68+ |
弹性盒布局
使用 gap
与弹性盒布局的规范目前处于工作草案状态。
这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该特性。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
84 | 63 | 不支持 | 84 | 14.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 14.5-14.8 |
多列布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
不支持 | 84+ | 79+ | 84+ | 不支持 | 69+ |
iOS Safari | Opera Mobile | Android 浏览器 | Chrome for Android | Firefox for Android |
---|---|---|---|---|
不支持 | 不支持 | 81+ | 84+ | 68+ |
更多信息
- CSS 盒模型对齐模块级别 3
- Chromium 推出 Flexbox gap(工单 #761904)
- WebKit CSS 特性状态
- 网格布局
- 弹性盒布局
- 多列布局
- CSS 网格布局:入门(Alligator.io)