column-gap

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

/* 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;

Syntax

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

Browser compatibility