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

column-gap プロパティ

 column-gap プロパティは、column-count プロパティによって分割される列間のギャップを指定するプロパティです。 ギャップは数値で設定します。
 column-count プロパティは、エレメントを横方向に分割します。

 column-rule プロパティが設定されている場合は middle に設定されます。

フレックスアイテムの並びを縦に(Exampleを参照
div {
	column-count: 3;
	column-gap: 1em;
}

関連 CSS プロパティ

 column-gap プロパティには、以下のような関連するプロパティがあります。

column-count分割数
column-fill均等に割るか
column-gap分割した内容の間
column-rulecolumn-rule-width、column-rule-style、column-rule-colorプロパティの一括指定
column-rule-colorカラム間に装飾する罫線の色
column-rule-styleカラム間に装飾する罫線の種類
column-rule-widthカラム間に装飾する罫線の幅
column-span分割されたエレメントにまたがって表示
column-width分割する内容の幅
columnsエレメントの分割数と幅の指定

ページ内 Index

構文(Syntax)

CSS

column-gap: normal | length | initial | inherit ;

DOM ( JavaScript )

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

値(Values)

Value摘要
normal初期値(default値)
lengthギャップを数値で設定
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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

Example

 column-gap プロパティの例です。横方向に3列に分割して、列間を1文字分あけています。