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

column-gap プロパティ

 column-gap プロパティは、columnscolumn-widthcolumn-count プロパティによってカラムに分割されたカラム間のギャップ幅を指定する CSS プロパティです。 ギャップ値は CSS の長さで指定します。

 columnscolumn-widthcolumn-count プロパティは、エレメントをカラムに分割(横に分割)表示します。

フレックスアイテムの並びを縦に(Exampleを参照
column-count: 3;
column-gap: 3em;
表示例

カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。

 カラム間に罫線を表示する column-rule プロパティが設定されている場合は、column-gap プロパティは middle に設定されます。

ページ内 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文字分あけています。