row-gap

**row-gap** CSS 属性设置元素行之间间隙（gutter）的大小。

规范的早期版本将此属性称为 grid-row-gap，为了与旧网站保持兼容性，浏览器仍然接受 grid-row-gap 作为 row-gap 的别名。

试试看

语法

css
/* <length> values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> value */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

值

<length-percentage>

是分隔行的间隙的宽度。 <percentage> 值相对于元素的尺寸。

正式定义

初始值normal
应用于多列元素、flex 容器、网格容器
继承否
百分比参考内容区域的相应尺寸
计算值如指定，将 <length> 设为绝对值，并将 normal 计算为零，除了在多列元素上
动画类型一个 长度、百分比 或 calc()；

正式语法

row-gap = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

Flex 布局

HTML

html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

结果

网格布局

HTML

html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 150px 1fr;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

结果

规范

规范
CSS 盒子对齐模块级别 3
# column-row-gap

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅