CSS3 column-gapProperty
Example
Specify the gap between columns as 40 pixels:
div {
column-gap: 40px;
}
Try it Yourself »
More examples at the bottom of this page.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Property definition and usage instructions
The column-gap property specifies the gap between columns.
Note:If a distance rule between columns is specified, it will take the average value.
| Default Value: | normal |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.columnGap="40px" |
Syntax
column-gap: length|normal;
| Value | Description |
|---|---|
| length | A specified length will set the gap between columns. |
| normal | Specifies a normal gap between columns. W3C recommends a 1em value. |
More Examples
Column-count
The text of the div element is divided into three columns.
Column-rule
Specifies the rule between columns: width, style, and color.
Related Articles
CSS Tutorial:CSS Multi-column
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:row-gapProperty
CSS Reference Manual:gapProperty
HTML DOM Reference Manual:columnGap property
other extensions