CSS row-gap 屬性

定義和用法

row-gap 屬性規定彈性框或網格布局中行之間的間隙。

row-gap 屬性以前稱為 grid-row-gap。

另請參閱：

CSS 教程：CSS 網格布局

CSS 教程：CSS 彈性框布局

CSS 參考手冊：gap 屬性

CSS 參考手冊：column-gap 屬性

實例

例子 1

規定網格行之間的 50 像素間隙：

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

親自試一試

例子 2：彈性框布局

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

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

親自試一試

CSS 語法

row-gap: length|normal|initial|inherit;
值 描述
length 設置行之間間隙的指定長度或百分百值。
normal 默認值。規定行之間的正常間隙。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

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