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ボックスアライメントモジュールレベル3
JavaScript文法： object.style.rowGap="50px"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

レイアウト Chrome IE / Edge Firefox Safari Opera
グリッド内で 66 16 61 12 53
エラストイックフレーム内で 84 84 63 14.1 70