row-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

row-gapCSS 属性用来设置行元素之间的间隙(gutter)大小。

规范的早期版本将此属性命名为 grid-row-gap,为了保持与旧网站的兼容性,浏览器仍然会将 grid-row-gap 视为 row-gap 的别名。

尝试一下

语法

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

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

/* 全局值 */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

<length-percentage>

表示行之间的间隔宽度。<percentage> 表示相对栅格容器的百分比。

形式定义

初始值normal
适用元素multi-column elements, flex containers, grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
计算值as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
动画类型a length, percentage or calc();

形式语法

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

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

示例

弹性布局

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;
}

结果

规范

Specification
CSS Box Alignment Module Level 3
# column-row-gap

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
row-gap
Supported in Flex Layout
Supported in Grid Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

参见