CSS gap 属性

定义和用法

gap 属性定义 flexbox、网格或多列布局中行与列之间的间隙大小。它是以下属性的简写属性：

注意：gap 属性以前被称为 grid-gap。

另请参阅：

CSS 教程：CSS 网格布局

CSS 教程：CSS 弹性框布局

CSS 教程：CSS 多列布局

CSS 参考手册：row-gap 属性

CSS 参考手册：column-gap 属性

实例

例子 1

将行与列之间的间距设置为 50px：

.grid-container {
  gap: 50px;
}

亲自试一试

例子 2：网格布局

在网格布局中将行间距设置为 20px，将列间距设置为 50px：

#grid-container {
  display: grid;
  gap: 20px 50px;
}

亲自试一试

例子 3：弹性框布局

在弹性框布局中将行间距设置为 20px，将列间距设置为 70px：

#flex-container {
  display: flex;
  gap: 20px 70px;
}

亲自试一试

例子 4：多列布局

在多列布局中将列间距设置为 50px：

#newspaper {
  columns: 3;
  gap: 50px;
}

亲自试一试

CSS 语法

gap: row-gap column-gap|initial|inherit;
值 描述
row-gap 设置网格或弹性框布局中行之间的间隙大小。
column-gap 设置网格、弹性框或多列布局中列之间的间隙大小。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： normal normal
继承： 否
动画制作： 支持。请查看单独的属性。请参阅：动画相关属性。
版本： CSS Box Alignment Module Level 3
JavaScript 语法： object.style.gap="50px 100px"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

布局 Chrome IE / Edge Firefox Safari Opera
在网格中 66 16 61 12 53
在弹性框中 84 84 63 14.1 70
在多列中 66 16 61 不支持 53