1. Web
  2. CSS
  3. gap

gap

Baseline 已廣泛支援

此功能已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 10 月以來，它已在各大瀏覽器中可用。

gap CSS 簡寫屬性用於設定行與列之間的間隙（也稱為槽）。此屬性適用於多列、彈性和網格容器。

試一試

gap: 0;

gap: 10%;

gap: 1em;

gap: 10px 20px;

gap: calc(20px + 10%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

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>

指定分隔列、彈性項、彈性行和網格線的槽寬度。

<percentage>

指定分隔列、彈性項、彈性行和網格線的槽寬度，相對於元素尺寸。

描述

此屬性定義了 CSS 多列布局中列之間的間隙，CSS 彈性盒子佈局中彈性項和彈性行之間的間隙，以及 CSS 網格佈局中行和列之間的間隙。

生成的間隙會建立寬度或高度等於指定間隙大小的空白區域，很像一個空的項或軌道。元素之間的可見空間可能與提供的 gap 值不同，因為外邊距、內邊距和分散式對齊可能會在 gap 確定的基礎上增加元素之間的間距。

在網格佈局中，第一個值定義了行之間的槽，第二個值定義了列之間的槽。在網格和彈性佈局中，如果只包含一個值，則該值用於兩個維度。

對於彈性容器，第一個值是彈性項之間還是彈性行之間的間隙取決於方向。彈性項根據 flex-direction 屬性的值以行或列的形式佈局。對於行（row（預設）或 row-reverse），第一個值定義了彈性行之間的間隙，第二個值定義了每行內項之間的間隙。對於列（column 或 column-reverse），第一個值定義了彈性行內彈性項之間的間隙，第二個值定義了每個彈性行之間的間隙。

在多列容器中，第一個值定義了列之間的間隙。透過使用 column-rule-style 屬性或 column-rule 簡寫，可以在原本的“空白空間”中新增分隔線。

百分比間隙值始終根據容器元素的內容框大小計算。當容器大小明確時，在所有佈局模式下，行為都是明確且一致的。由於這三種佈局模式（多列、彈性、網格）對迴圈百分比大小的處理方式不同，gap 也是如此。在網格佈局中，迴圈百分比大小在確定固有大小貢獻時解析為零，但在佈局內容時解析為元素的內容框。以下兩個示例演示了在示例部分中具有明確容器大小和隱式容器大小的百分比間隙值。

規範的早期版本將此屬性稱為 grid-gap，為了保持與舊版網站的相容性，瀏覽器仍然接受 grid-gap 作為 gap 的別名。

正式定義

初始值作為簡寫中的每個屬性
應用於多列元素、彈性容器、網格容器
繼承性否
計算值作為簡寫中的每個屬性
  • row-gap: 如指定，<length> 轉換為絕對值，normal 計算為零，多列元素除外
  • column-gap: 如指定，<length> 轉換為絕對值，normal 計算為零，多列元素除外
動畫型別作為簡寫中的每個屬性

正式語法

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

結果

百分比間隙值與顯式容器大小

如果容器設定了固定大小，則間隙百分比值的計算基於容器的大小。因此，間隙行為在所有佈局中都保持一致。在以下示例中，有兩個容器，一個具有網格佈局，另一個具有彈性佈局。容器有五個紅色的 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>
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 Developer Tools 中的 Inspector 選項卡檢查網格和彈性元素。為了檢視實際間隙，請將滑鼠懸停在檢查器中的 <div id="grid"> 和 <div id="flex"> 標籤上。您會注意到兩種情況下的間隙都是相同的，即 25px。

百分比間隙值與隱式容器大小

如果容器上未顯式設定大小，則百分比間隙在網格和彈性佈局中行為不同。在以下示例中，容器未顯式設定高度。

在網格佈局的情況下，百分比間隙不計入網格的實際高度。容器的高度使用 0px 間隙計算，因此實際高度為 100px (20px x 5)。然後使用內容框的高度計算實際百分比間隙，間隙為 12.5px (100px x 12.5%)。間隙僅在渲染前應用。因此，網格保持 100px 高，但由於稍後在渲染前新增的百分比間隙而溢位。

在彈性佈局的情況下，百分比間隙始終導致零值。

規範

規範
CSS Box Alignment Module Level 3
# gap-簡寫

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.