column-gap
column-gap
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.
| 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
/* 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;
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
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
