The column-gap
CSS property sets the size of the gap between columns for elements which are specified to be displayed as multi-column elements.
/* Keyword value */ column-gap: normal; /* <length> values */ column-gap: 3px; column-gap: 2.5em; /* Global values */ column-gap: inherit; column-gap: initial; column-gap: unset;
Initial value | normal |
---|---|
Applies to | multicol elements |
Inherited | no |
Percentages | refer to the content width of the multi-column element |
Media | visual |
Computed value | as specified with lengths made absolute |
Animation type | a length, percentage or calc(); |
Canonical order | per grammar |
Syntax
The keyword normal
, or a length.
Values
normal
- Is a keyword indicating to use the browser-defined default spacing between columns. The specification, which most modern browsers follow, recommends that this be equal to a length of
1em
. <length>
- Is a
<length>
value defining the size of the gap between columns. It must not be negative, but may be equal to0
.
Formal syntax
<length-percentage> | normalwhere
<length-percentage> = <length> | <percentage>
Examples
.content-box { border: 10px solid #000000; column-count: 3; column-gap: 20px; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-gap' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 50 Yes -webkit- | Yes Yes -webkit- | 52 | 10 | 11.1 15 -webkit- | 3 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | 50 | Yes Yes -webkit- | 52 4 -moz- | ? | ? | ? |
1. Before Firefox 3, the default value for the normal
keyword was 0
and not 1em
.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
ddbeck,
mfluehr,
wbamberg,
chrisdavidmills,
erikadoyle,
jpmedley,
Sebastianz,
Prinz_Rana,
fscholz,
jsx,
kscarfone,
teoli,
Sheppy,
ethertank,
brianloveswords,
plapier,
kuvik3,
Marsf,
Jürgen Jeka,
DBaron,
BijuGC
Last updated by:
ddbeck,