gap プロパティ
gap プロパティは、エレメントどうしの間隔を指定する CSS のプロパティです。row-gap と column-gap プロパティを一括で指定することができます。
ギャップ値は CSS の長さで指定します。
display: flex; や columns によってエレメントが横に並ぶようなレイアウトで機能します。
#over {
display: flex;
flex-wrap: wrap;
width: 10em;
gap:2em;
}
詳しくは Example を参照してください
この gap プロパティは columns、 column-width、 column-count プロパティによってカラムに分割されたカラム間のギャップ幅を指定することもできます。
ページ内 Index
構文(Syntax)
gap プロパティの構文です。
CSS
gap: normal | length ;
指定する値は１つまたは2つが可能です。１つの場合は row-gap と column-gap が同じ値になります。
２つを指定する場合には row-gap と column-gap をそれぞれ指定した形になります。
値は CSS の長さで指定します。% （パーセンテージ）が使え、% の場合は gap プロパティが指定されたエレメントの大きさが基準になります。
DOM ( JavaScript )
object.style.gap
object.style.gap=" normal | length "
値（Values）
gap プロパティに指定できる値です。
| Value | 摘要 |
|---|---|
| normal | 初期値（default値） |
| length | CSS の長さ |
length として指定できる値は CSS の長さです。% も指定できます。% の場合はエレメントの大きさに比例します。
値は１つまたは２つ指定することができます。１つの場合は row-gap と column-gap が同じ値になります。２つの場合には row-gap と column-gap をそれぞれ指定した形になります。
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
備考（Remarks）
gap プロパティの備考です。
| 初期値（Default value） | normal |
| 継承（Inherited） | No |
| 変化（Animatable） | Yes |
Example
gap プロパティの例です。
gap プロパティは、display: flex; や columns でのエレメントどうしの間隔を指定できます。
以下の例は display:flex; において gap プロパティによってエレメント間の間隔を指定しています。
gap プロパティは親エレメントに設定します。
column-count における gap の例
column-count によってカラムに分割表示されたエレメントにおける gap プロパティの例です。１つのエレメントを横方向に３列に分割して、列間を１文字分あけています。