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.

CSS gap 简写属性用于设置行与列之间的间隙(网格间距)。

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

尝试一下

组成属性

该属性为以下 CSS 属性的简写:

语法

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

/* 一个 <percentage> 值 */
gap: 16%;
gap: 100%;

/* 两个 <length> 值 */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* 一个或两个 <percentage> 值 */
gap: 16% 100%;
gap: 21px 82%;

/* calc() 值 */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

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

该属性用来表示 <'row-gap'> 和可选的 <'column-gap'> 的值。如果缺失 <'column-gap'>,则其会被设置成跟 <'row-gap'> 一样的值。

<'row-gap'><'column-gap'> 都可以用 <length> 或者 <percentage> 来指定。

<length>

网格线之间的间隙宽度。

<percentage>

网格线之间的间隙宽度,为相对于当前元素尺寸的百分比。

形式定义

初始值该简写所对应的每个属性:
适用元素multi-column elements, flex containers, grid containers
是否是继承属性
计算值该简写所对应的每个属性:
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
动画类型该简写所对应的每个属性:

形式语法

gap = 
<'row-gap'> <'column-gap'>?

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

<column-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;
  gap: 20px 5px;
}

#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></div>
  <div></div>
  <div></div>
</div>

CSS

css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

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

结果

多列布局

HTML

html
<p class="content-box">
  这是使用 CSS <code>gap</code> 属性创建的具有 40px
  列间距的多栏文本。你不觉得这很有趣和令人兴奋吗?我当然是这么认为的!!!
</p>

CSS

css
.content-box {
  column-count: 3;
  gap: 40px;
}

结果

规范

Specification
CSS Box Alignment Module Level 3
# gap-shorthand

浏览器兼容性

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
gap
Supported in Flex Layout
Supported in Grid Layout
calc() values
<percentage> values
Supported in Multi-column 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.

参见