CSS column-gap property

Definition and usage

The column-gap property specifies the space between columns.

Note:If space between columns is set column-ruleIt will be displayed in the middle of the gap.

See also:

CSS3 Tutorial:CSS3 Multicolumn

HTML DOM Reference Manual:columnGap property

Example

Specifies the space between columns as 40 pixels:

div {
  column-gap: 40px;
}

Try it yourself

More examples are at the bottom of the page.

CSS syntax

column-gap: length|normal;

Property value

Value Description Test
length Sets the space between columns to a specified length. Test
normal Specifies the space between columns as a normal space. The recommended value by W3C is 1em. Test

Technical details

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

More examples

Column-count
Divides the text in the div element into three columns.
Column-rule
Specifies the width, style, and color between columns.

Browser support

Numbers in the table indicate the first browser version that fully supports this property.

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Property Chrome IE / Edge Firefox Safari Opera
In multiple columns 50 10 52 10 37
In the grid 66 16 61 12 53
In the flexible frame 84 84 63 14.1 70