间隙

gap CSS 简写属性设置行和列之间的间隙（也称为间距）。此属性适用于多列、flex 和 grid 容器。

语法

css

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

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

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

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

/* Global values */
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>: 指定分隔列、flex 项目、flex 行和网格线的间距的宽度。
<percentage>: 指定相对于元素尺寸的分隔列、flex 项目、flex 行和网格线的间距的宽度。

描述

此属性定义了 CSS 多列布局中列之间的间距，CSS 弹性盒布局中 flex 项目和 flex 行之间的间距，以及 CSS 网格布局中行和列之间的间距。

生成的间隙创建具有间距指定大小的宽度或高度的空白，类似于空白项目或轨道。元素之间的可见空间可能与提供的 gap 值不同，因为边距、填充和分布式对齐可能会使元素之间的间隔超出 gap 确定的间隔。

在网格布局中，第一个值定义行之间的间距，第二个值定义列之间的间距。在网格和 flex 布局中，如果只包含一个值，则该值用于两个维度。

对于 flex 容器，第一个值是 flex 项目之间的间隙还是 flex 行之间的间隙取决于方向。flex 项目根据 flex-direction 属性的值，排列成行或列。对于行（row（默认值）或 row-reverse），第一个值定义 flex 行之间的间隙，第二个值定义每行中项目之间的间隙。对于列（column 或 column-reverse），第一个值定义 flex 行中 flex 项目之间的间隙，第二个值定义每行之间的间隙。

在多列容器中，第一个值定义列之间的间隙。可以通过使用 column-rule-style 属性或 column-rule 简写，在原本“空白”处添加一条分割线。

百分比间隙值始终相对于容器元素的内容框大小计算。当容器大小是确定的时，跨布局模式的行为是明确定义且一致的。由于这三种布局模式（多列、flex 和网格）对循环百分比大小的处理方式不同，gap 也是如此。在网格布局中，循环百分比大小在确定内在大小贡献时相对于零解析，但在排列内容时相对于元素的内容框解析。以下两个示例演示了明确容器大小和隐式容器大小的百分比间隙值。

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

正式定义

初始值	作为简写的所有属性的每个属性 `row-gap`: `normal` `column-gap`: `normal`
应用于	多列元素、flex 容器、网格容器
继承	否
计算值	作为简写的所有属性的每个属性 `row-gap`: 指定的值，其中转换为绝对值，并且 normal 计算为零，除了多列元素。 `column-gap`: 指定的值，其中转换为绝对值，并且 normal 计算为零，除了多列元素。
动画类型	作为简写的所有属性的每个属性 `row-gap`: 长度，百分比或 calc()； `column-gap`: 长度，百分比或 calc()；

正式语法

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

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

<column-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;
  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">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>

CSS

css

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

结果

百分比间隙值和明确容器大小

如果容器具有固定大小设置，则间隙百分比值的计算基于容器的大小。因此，间隙行为在所有布局中都是一致的。在以下示例中，有两个容器，一个使用网格布局，另一个使用 flex 布局。容器有五个 20x20px 的红色子元素。两个容器都使用 height: 200px 明确设置为 200px 高，间隙使用 gap: 12.5% 0 设置。

html

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body > div {
  background-color: #ccc;
  width: 200px;
  flex-flow: column;
}

css

#grid {
  display: inline-grid;
  height: 200px;
  gap: 12.5% 0;
}

#flex {
  display: inline-flex;
  height: 200px;
  gap: 12.5% 0;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

现在使用 Web 开发者工具中的检查器选项卡检查网格和 flex 元素。为了查看实际的间隙，将鼠标悬停在检查器中 <div id="grid"> 和 <div id="flex"> 标签上。您会注意到间隙在两种情况下都是相同的，即 25px。

百分比间隙值和隐式容器大小

如果容器上没有明确设置大小，则百分比间隙在网格布局和 flex 布局中表现不同。在以下示例中，容器没有明确设置高度。

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body > div {
  background-color: #ccc;
  width: 200px;
}

#grid {
  display: inline-grid;
  gap: 12.5% 0;
}

#flex {
  display: inline-flex;
  gap: 12.5% 0;
  flex-flow: column;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

在网格布局中，百分比间隙不会影响网格的实际高度。容器的高度使用 0px 间隙计算，因此实际高度变为 100px（20px x 5）。然后，使用内容框的高度计算实际的百分比间隙，间隙变为 12.5px（100px x 12.5%）。间隙在渲染之前应用。因此，网格仍然是 100px 高，但由于在渲染之前添加了百分比间隙，因此会溢出。

在 flex 布局中，百分比间隙始终导致零值。

规范

规范
CSS 框对齐模块级别 3 # gap-简写

浏览器兼容性

BCD 表仅在浏览器中加载

间隙

试试看

组成属性

语法

值

描述

正式定义

正式语法

示例

Flex 布局

HTML

CSS

结果

网格布局

HTML

CSS

结果

多列布局

HTML

CSS

结果

百分比间隙值和明确容器大小

百分比间隙值和隐式容器大小

规范

浏览器兼容性

另请参阅