CSS row-gap 属性

定义和用法

row-gap 属性规定弹性框或网格布局中行之间的间隙。

row-gap 属性以前称为 grid-row-gap。

另请参阅：

CSS 教程：CSS 网格布局

CSS 教程：CSS 弹性框布局

CSS 参考手册：gap 属性

CSS 参考手册：column-gap 属性

实例

例子 1

规定网格行之间的 50 像素间隙：

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

亲自试一试

例子 2：弹性框布局

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

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

亲自试一试

CSS 语法

row-gap: length|normal|initial|inherit;
值 描述
length 设置行之间间隙的指定长度或百分百值。
normal 默认值。规定行之间的正常间隙。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

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

浏览器支持

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

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