Style columnGap Property

Style Object Reference Style Object


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

Internet Explorer Firefox Opera Google Chrome Safari

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.  


Return the columnGap property:

Set the columnGap property:"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 Reference Style Object