Manuales 
column-gap 482r70
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. 1w3g6u
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 55184y
- Syntax:
column-gap: <length> | normal
- Initial: normal
- Applies To: multi-column elements
- Animatable: yes, as a length
Values 584j31
- <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 3e5p5z
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 2x4j2k
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 k5t66
CSS3 Multiple column layout 5k44y
Method of flowing information in multiple columns
W3C Candidate Recommendation
ed from the following versions:
Desktop 3n671n
- 50
- 52
- 10
- 11
- 10
Mobile / Tablet 4q224p
- 10
- 66
- all
- 66
- 60