The column-gap CSS property sets the size of the gap (spacing) between an element's columns.

Syntax

/* Keyword value */
column-gap: normal; 

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

The column-gap property is specified as one of the values listed below.

Values

normal
The browser's default spacing is used between columns. The specification, which most modern browsers follow, recommends that this be equal to a length of 1em.
<length>
The size of the gap between columns, defined as a <length>. It must non-negative.
<percentage>
The size of the gap between columns, defined as a <percentage>. It must non-negative.

Formal syntax

<length-percentage> | normal

where
<length-percentage> = <length> | <percentage>

Example

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS `column-gap` property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Result

Specifications

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-gap' in that specification.
Working Draft Initial definition.

Initial valuenormal
Applies tomulticol elements
Inheritedno
Percentagesrefer to the content width of the multi-column element
Mediavisual
Computed valueas specified with lengths made absolute
Animation typea length, percentage or calc();
Canonical orderper grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

50

Yes -webkit-

Yes

Yes -webkit-

52

1.5 -moz- 1

10

11.1

15 -webkit-

3 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes50

Yes

Yes -webkit-

52

4 -moz-

? ? ?

1. Before Firefox 3, the default value for the normal keyword was 0 and not 1em.