column-gap プロパティ
column-gap プロパティは、column-count プロパティによって分割される列間のギャップを指定するプロパティです。
ギャップは数値で設定します。
column-count プロパティは、エレメントを横方向に分割します。
column-rule プロパティが設定されている場合は middle に設定されます。
div {
column-count: 3;
column-gap: 1em;
}
関連 CSS プロパティ
column-gap プロパティには、以下のような関連するプロパティがあります。
| column-count | 分割数 |
| column-fill | 均等に割るか |
| column-gap | 分割した内容の間 |
| column-rule | column-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 プロパティの例です。横方向に３列に分割して、列間を１文字分あけています。