備忘録的プログラミングリファレンス

gap プロパティ

 gap プロパティは、エレメントどうしの間隔を指定する CSS のプロパティです。row-gapcolumn-gap プロパティを一括で指定することができます。

 ギャップ値は CSS の長さで指定します。

 display: flex;columns によってエレメントが横に並ぶようなレイアウトで機能します。

gap プロパティ
#over {
	display: flex;
	flex-wrap: wrap;
	width: 10em;

	gap:2em;
}

詳しくは Example を参照してください

 この gap プロパティは columnscolumn-widthcolumn-count プロパティによってカラムに分割されたカラム間のギャップ幅を指定することもできます。

ページ内 Index

構文(Syntax)

CSS

gap: normal | length | initial | inherit ;

 指定する値は1つまたは2つが可能です。1つの場合は row-gapcolumn-gap が同じ値になります。
 2つを指定する場合には row-gapcolumn-gap をそれぞれ指定した形になります。

 値は CSS の長さで指定します。% (パーセンテージ)が使え、% の場合は gap プロパティが指定されたエレメントの大きさが基準になります。

DOM ( JavaScript )

値の取得
object.style.gap
値の設定
object.style.gap=" normal | length | initial | inherit "

値(Values)

Value摘要
normal初期値(default値)
lengthCSS の長さ
initial初期値に戻す
inherit親エレメントのプロパティを継承

 length として指定できる値は CSS の長さです。% も指定できます。% の場合はエレメントの大きさに比例します。

 値は1つまたは2つ指定することができます。1つの場合は row-gapcolumn-gap が同じ値になります。2つの場合には row-gapcolumn-gap をそれぞれ指定した形になります。

備考(Remarks)

初期値(Default value)normal
継承(Inherited)No
変化(Animatable)Yes

Example

 gap プロパティの例です。以下の例は display:flex; において gap プロパティによってエレメント間の間隔を指定しています。

 gap プロパティは親エレメントに設定します。

column-count における gap の例

 column-count によってカラムに分割表示されたエレメントにおける gap プロパティの例です。1つのエレメントを横方向に3列に分割して、列間を1文字分あけています。