CSS3 column-gap Property

Example

Specify a 40 pixels gap between the columns:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The column-gap property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-column-gap property.

Safari and Chrome support an alternative, the -webkit-column-gap property.


Definition and Usage

The column-gap property specifies the gap between the columns.

Note: If there is a column-rule between columns, it will appear in the middle of the gap.

Default value: normal
Inherited: no
Version: CSS3
JavaScript syntax: object.style.columnGap="40px"


Syntax

column-count: length|normal;

Value Description
length A specified length that will set the gap between the columns
normal Specifies a normal gap between the columns. W3C suggests a value of 1em


Examples

Try it Yourself - Examples

Column-count
Divide the text in a div element into three columns.

Column-rule
Specify the width, style and color of the rule between columns.