CSS column-gap Property

column-gap: Specify a 40 pixels gap between the columns:

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

Try it Yourself »

More “Try it Yourself” examples below.

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
Animatable: yes. Read about animatable – Try it
Version: CSS3
JavaScript syntax: object.style.columnGap=”50px” Try it
CSS Syntax
column-gap: length|normal|initial|inherit;
Property Values
Value Description
length A specified length that will set the gap between the columns
normal Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit


Specify the width, style, and color of the rule between columns:

div {
-webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px double #ff00ff; /* Firefox */
column-rule: 4px double #ff00ff;

Try it Yourself »