The specified interval between columns is 40 pixels:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
There are more instances at the bottom of the page.
Browser support
| Ie | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
Internet Explorer 10 and Opera support the column-gap property.
Firefox supports alternative -moz-column-gap properties.
Safari and Chrome support alternative -webkit-column-gap properties.
Note: Internet Explorer 9 and earlier browsers do not support the column-gap property.
Definitions and usages
The column-gap property specifies the interval between columns.
Note: If a column-rule is set between columns, it appears in the middle of the interval.
| Default: | normal |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.columnGap="40px" |
Grammar
column-gap: length|normal;
| Value | Describe | Test |
|---|---|---|
| length | Set the interval between columns to the specified length. | Test |
| normal | Specifies that the interval between columns is a regular interval. The recommended value for W3C is 1em. | Test |
Try it yourself - example
- Column-count
- Divide the text in the div element into three columns.
- Column-rule
- Specifies the width, style, and color between columns.
Related pages
CSS3 tutorial: CSS3 multiple columns