Manuales 
column-gap 115y1k
The column-gap property is used to specify the amount of space between adjacent columns in a multi-column layout. It specifies the space—or gap—between columns belonging to the same multi-column element. 241p22
The height of the column gap is the same height as the height of the columns.
If there is a column rule between columns (which is a line drawn between the columns to set them apart visually), the rule is drawn in the middle of the gap, and it does not take up any space, which means that it will not add to the amount of space between columns specified using column-gap.
If the width and count of columns do not fit into the width of the element, the browser will make necessary adjustments and may reduce the column count to fit the specified column widths into the element. The column gap may also result in narrowing columns down, depending on the amount of space available.
Official Syntax 2r1j5a
- Syntax:
column-gap: <length> | normal
- Initial: normal
- Applies To: multi-column elements
- Animatable: yes, as a length
Values 291l5
- <length>
-
The space between adjacent columns in a multi-column element is set to the given value. See the
<length>entry for a list of possible vales. Negative values are not allowed. - normal
-
The default value. This value is -agent specific. A value of
1emis suggested by the specification.
Examples 2t4m6h
The following will create a three-column layout inside an element, and sets the space between them using the column-gap property.
.mag {
columns: 30% 3;
column-gap: 1.5em;
}
The following are all valid column-gap values:
column-gap: 3em;
column-gap: 20px;
column-gap: 10%;
column-gap: 2pt;
/* ... any length value is allowed as long as it"s not negative ... */
Live Demo 3h4i39
In the following demo, the columns property is used to create a multi-column layout on an element. Change the value of the column-gap property to see how the space between the columns changes, and how the widths of the columns adjust.
Browser f3k20
CSS3 Multiple column layout 485p61
Method of flowing information in multiple columns
W3C Candidate Recommendation
ed from the following versions:
Desktop 544w68
- 50
- 52
- 10
- 11
- 10
Mobile / Tablet 60z3k
- 10
- 66
- all
- 66
- 60