column-gap

Summary

The column-gap property controls the width of the gap between columns in multi-column elements.

Overview table

Initial value: normal
Applies to: multi-column elements
Inherited: No
Media: visual
Computed value: absolute length or ‘normal’
Animatable: Yes
CSS Object Model Property: columnGap
Percentages: N/A

Syntax

column-gap: length
column-gap: normal

Values

normal: Default. The width of the normal value is user-agent specific, but 1em is suggested.
length: A floating-point number, followed by either an absolute units designator

(cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px), that indicates the width of the gap between columns. For more information about the supported length units, see CSS Length Units Reference.

Negative values are not valid.

Examples

Makes as many 15em columns with a column-gap of 4em

/*
Makes as many 15em columns with a column-gap of 4em
*/

#columns {
  /* Prefix free example below, use vendor prefixes where needed */
  column-width: 15em;
  column-gap: 4em;
  column-rule: 1px solid green;
}

View live example

Related specifications

CSS Multi-column Layout Module: Candidate Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]