目录

CSS gap 属性

❮上一节完整的CSS参考下一节❯

示例

将行之间和列之间的间隙设置为 50px：

.grid-container {
gap: 50px;
}

亲自试一试 »

定义和用法

这个gap属性定义了弹性盒、网格或多列布局中行之间和列之间的间隙大小。它是以下属性的简写：

row-gap
column-gap

笔记：这个gap属性以前被称为 grid-gap。

展示演示❯

默认值：	正常正常
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS 框对齐模块级别 3
JavaScript 语法：	对象.style.gap="50px 100px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
gap (in Grid)	66	16	61	12	53
gap (in Flexbox)	84	84	63	14.1	70
gap (in Multiple Columns)	66	16	61	Not supported	53

CSS 语法

gap: row-gap column-gap|initial|inherit;

属性值

Value	Description	Demo
row-gap	Sets the size of the gap between the rows in a grid or flexbox layout	Demo ❯
column-gap	Sets the size of the gap between the columns in a grid, flexbox or multi-column layout	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

网格布局

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

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

亲自试一试 »

弹性盒布局

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

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

亲自试一试 »

多列布局

在多列布局中将列之间的间隙设置为 50px：

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

亲自试一试 »

相关页面

CSS 教程：CSS 网格布局

CSS 教程：CSS Flexbox 布局

CSS 教程：CSS 多列布局

CSS 参考：行间距属性

CSS 参考：列间隙属性

❮上一节完整的CSS参考下一节❯