CSS - gap 属性

---

---

定义和用法

该属性定义 FlexBox、Grid 或多列布局中行之间以及列之间的间隙。

• row-gap
• column-gap

CSS 语法

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

属性值

 

• row-gap：设置网格或flexbox布局中行之间的间隙大小
• column-gap：设置网格、flexbox或多列布局中列之间的间隙大小
• initial：将此属性设置为默认值。
• inherit：从其父元素继承此属性。

示例

网格布局

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

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

Flexbox 布局

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

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

多列布局

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

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