【CSS3リファレンス】column-gap

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-gapです。

概要

column-gapプロパティを使用して段組間の幅を指定する事ができます。

.sample {
  column-gap: 2em;
}

適用要素

段組レイアウトされている要素

指定できる値

数値+単位

数値に単位を付けて段と段の幅を設定
負の値は設定できません。

normal

ブラウザによる
デフォルトは1em程度です。

初期値

normal

サンプル

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, nisi eu semper congue, dui ante varius nunc, in tempus ex lorem sed urna. Sed placerat pretium nibh, ac vulputate risus posuere eget. Donec felis lacus, elementum non augue ac, tincidunt placerat erat. Aenean posuere arcu nec est sodales convallis. Aliquam in purus vel metus tincidunt euismod sed eu quam. Etiam quis elit vel sapien varius tincidunt. Morbi accumsan posuere purus ultricies euismod. Nulla dictum eget enim luctus dictum. Praesent porta tellus erat, vitae tincidunt orci ornare a. Donec semper blandit turpis sed gravida. Pellentesque dapibus luctus dolor, sit amet tempor mauris condimentum quis. Suspendisse ac condimentum ipsum. Vivamus vitae magna tortor. Mauris nec lobortis dui.
</p>

CSS

.demo {
  -webkit-column-width: 10em;
  -webkit-column-gap: 4em;
  column-width: 10em;
  column-gap: 4em;
}

サンプルのCSSはVendor-Prefixを使用した例も載せてあります。

Result