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
How to read CSS 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
[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,