CSS column-gap 属性

定義と使用方法

column-gap属性は、列間の間隔を指定します。

注記：列間に設定されている場合 column-rule、間隔の中央に表示されます。

参照もしてください：

CSS3チュートリアル：CSS3 多列

HTML DOMリファレンスマニュアル：columnGap属性

例

列間の間隔を40ピクセルに指定します：

div {
  column-gap: 40px;
}

実際に試してみてください

ページの下部に他の例があります。

CSS语法

column-gap: length|normal;

属性値

値 説明 テスト
length 列間の間隔を指定された長さに設定します。 テスト
normal 列間の間隔は通常の間隔として指定されます。W3Cの推奨値は1emです。 テスト

技術的詳細

デフォルト値： normal
継承性： no
バージョン： CSS3
JavaScript语法： object.style.columnGap="40px"

他の例

Column-count
div要素内のテキストを3列に分けます。
Column-rule
列間の幅、スタイル、色を指定します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

プレフィックスを使用する最初のバージョンは -webkit- または -moz- で始まる数字を示しています。

属性 Chrome IE / Edge Firefox Safari Opera
複数の列内で 50 10 52 10 37
グリッド内で 66 16 61 12 53
エラストイックフレーム内で 84 84 63 14.1 70