Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

多段要素として表示されるよう指定されたブロック要素の段組みの間隔を設定するために column-gap CSS プロパティが使用できます。

初期値normal
適用対象多段要素
継承不可
メディアvisual
計算値絶対的な長さまたはキーワード normal
アニメーションの可否可。 の値として補完しますlength
正規順序形式文法で定義される一意のあいまいでない順序

構文

<length> | normal

<length>
段と段の間隔は、負の値でなければ、どの CSS <length> 単位でも指定できます。</length>
normal
デフォルト値。ユーザエージェントに依存します。Firefox のようなデスクトップブラウザでは、この値は 1em です。

.content-box {
  border: 10px solid #000000;
  column-count: 3;
  column-gap: 20px;
}

仕様

仕様書 策定状況 コメント
CSS Multi-column Layout Module 勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有)-webkit 1.5 (1.8)-moz [*] 10 11.1 3.0 (522)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有) ? ? ?

[*] Firefox 3 (Gecko 1.9) 以前は、normal キーワードに関連づけられたデフォルト値は 1em ではなく 0 でした。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Prinz_Rana, fscholz, Sebastianz, ethertank, sosleepy, lmorchard, Marsf
 最終更新者: Prinz_Rana,