目录

CSS row-gap 属性


示例

指定网格行之间的间距为 50 像素:

#grid-container {
  display: grid;
  row-gap: 50px;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

这个row-gap属性指定弹性盒或网格布局中行之间的间隙。

这个row-gap属性以前被称为 grid-row-gap

展示演示❯

默认值: 普通的
遗传:
可动画: 是的。阅读可动画的尝试一下
版本: CSS 框对齐模块级别 3
JavaScript 语法: 对象.style.rowGap="50px"尝试一下

浏览器支持

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

Property
row-gap (in Grid) 66 16 61 12 53
row-gap (in Flexbox) 84 84 63 14.1 70


CSS 语法

row-gap: length|normal|initial|inherit;

属性值

Value Description Demo
length A specified length or % that will set the gap between the rows Demo ❯
normal Default value. Specifies a normal gap between the rows Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

弹性盒布局

在 Flexbox 布局中将行间距设置为 70px:

#flex-container {
  display: flex;
  row-gap: 70px;
}
亲自试一试 »

相关页面

CSS 教程:CSS 网格布局

CSS 教程:CSS Flexbox 布局

CSS 参考:间隙特性

CSS 参考:列间隙属性