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

CSS Grid Layout 起初是用 grid-row-gap 属性来定义的,目前逐渐被 row-gap 替代。但是,为了兼容那些不支持 row-gap 属性的浏览器,你需要像上面的例子一样使用带有前缀的属性。

语法

/* <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: unset;

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

正式语法

normal | <length-percentage>

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

示例

Flex布局

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

HTML

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

CSS

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

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

}

结果

Grid布局

HTML

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

CSS

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

#grid > div {
  background-color: lime;
}

结果

规范

规范 状态 备注
CSS Box Alignment Module Level 3
row-gap
Working Draft 初始定义

初始值normal
适用元素multi-column elements, flex containers, grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
适用媒体visual
计算值as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();
正规顺序per grammar

浏览器兼容性

在Flex布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome ? Edge ? Firefox Full support 63IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

在网格布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16
Full support 16
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Firefox Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 28
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1
Alternate Name
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
WebView Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Chrome Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile No support NoFirefox Android Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Safari iOS Full support 10.3
Alternate Name
Full support 10.3
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Samsung Internet Android Full support 6.0
Alternate Name
Full support 6.0
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

参见

文档标签和贡献者

此页面的贡献者: narol
最后编辑者: narol,