column-gap

概要

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

• 初期値 normal
• 適用対象多段要素
• 継承 しない
• メディア visual
• 計算値 絶対値の length またはキーワード normal
• アニメーションの可否可。length として可能

構文

column-gap:  <length> | normal

値

<length>

段と段の間隔は、負の値でなければ、どの CSS <length> 単位でも指定できます。

normal

デフォルト値。ユーザエージェントに依存します。Firefox のようなデスクトップブラウザでは、この値は 1em です。

例

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

仕様

ブラウザ実装状況

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

関連情報

• CSS リファレンス
• column-width 、 column-count 、 column-gap 、 column-rule 、 column-rule-width 、 column-rule-style 、 column-rule-color 、 column-span 、 column-fill 、 columns