Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!

Summary

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 valuenormal
Applies tomulticol elements
Inheritedno
Mediavisual
Computed valuethe absolute length or the keyword normal
Animatableyes, as a length
Canonical orderthe 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 to 0.

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 Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 1.5 (1.8)-moz[1] 10 11.10 3.0 (522)-webkit
Unprefixed 50.0        
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? (Yes) ? ? ? ?
Unprefixed No support 50.0         50.0

[1] Before Firefox 3 (Gecko 1.9), the default value associated to the normal keyword was 0 and not 1em.

See also

Document Tags and Contributors

 Last updated by: jpmedley,