Example
Specify a 40 pixels gap between the columns:
document.getElementById("myDIV").style.columnGap = "50px";
Try it Yourself »
Definition and Usage
The columnGap property specifies the gap between the columns.
Note: If there is a column-rule between columns, it will appear in the middle of the gap.
Browser Support
The columnGap property is supported in Internet Explorer 10 and Opera.
Firefox supports an alternative, the MozColumnGap property.
Safari and Chrome support an alternative, the WebkitColumnGap property.
Note: The columnGap property is not supported in Internet Explorer 9 and earlier versions.
Syntax
Return the columnGap property:
object.style.columnGap
Set the columnGap property:
object.style.columnGap="length|normal|initial|inherit"
Property Values
| Value | Description |
|---|---|
| length | A specified length that will set the gap between the columns |
| normal | Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | normal |
|---|---|
| Return Value: | A String, representing the column-gap property of an element |
| CSS Version | CSS3 |
Related Pages
CSS3 tutorial: CSS3 Multiple Columns
CSS reference: column-gap property
< Style Object