CSS gap 屬性

定義和用法

gap 屬性定義 flexbox、網格或多列布局中行與列之間的間隙大小。它是以下屬性的簡寫屬性：

注意：gap 屬性以前被稱為 grid-gap。

另請參閱：

CSS 教程：CSS 網格布局

CSS 教程：CSS 彈性框布局

CSS 教程：CSS 多列布局

CSS 參考手冊：row-gap 屬性

CSS 參考手冊：column-gap 屬性

實例

例子 1

將行與列之間的間距設置為 50px：

.grid-container {
  gap: 50px;
}

親自試一試

例子 2：網格布局

在網格布局中將行間距設置為 20px，將列間距設置為 50px：

#grid-container {
  display: grid;
  gap: 20px 50px;
}

親自試一試

例子 3：彈性框布局

在彈性框布局中將行間距設置為 20px，將列間距設置為 70px：

#flex-container {
  display: flex;
  gap: 20px 70px;
}

親自試一試

例子 4：多列布局

在多列布局中將列間距設置為 50px：

#newspaper {
  columns: 3;
  gap: 50px;
}

親自試一試

CSS 語法

gap: row-gap column-gap|initial|inherit;
值 描述
row-gap 設置網格或彈性框布局中行之間的間隙大小。
column-gap 設置網格、彈性框或多列布局中列之間的間隙大小。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： normal normal
繼承： 否
動畫制作： 支持。請查看單獨的屬性。請參閱：動畫相關屬性。
版本： CSS Box Alignment Module Level 3
JavaScript 語法： object.style.gap="50px 100px"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

布局 Chrome IE / Edge Firefox Safari Opera
在網格中 66 16 61 12 53
在彈性框中 84 84 63 14.1 70
在多列中 66 16 61 不支持 53