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 |
Media | visual |
Computed value | the absolute length or the keyword normal |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal 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> | normal
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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 50.0[2] |
(Yes)-webkit (Yes) |
1.5 (1.8)-moz[1] 52 (52)[3] |
10 | 11.10 | 3.0 (522)-webkit |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? 50.0[2] |
(Yes)-webkit (Yes) |
(Yes) 52.0 (52)[3] |
? | ? | ? | ? 50.0[2] |
[1] Before Firefox 3 (Gecko 1.9), the default value associated to the normal
keyword was 0
and not 1em
.
[2] Unprefixed as of Chrome 50.
[3] Unprefixed as of Gecko 52, with prefixed aliases still available.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
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:
wbamberg,