Search within TutorialsPark

CSS3 column-gap Property


To set the distance between columns in a multicolumn layout


Definition and Notes.

1. The CSS column-gap property defines the width of the gap between adjacent columns in an element laid out with multiple columns .

2. A high value for column-gap won't increase the overall width of the multi-column element. Instead, the space for gap is created by reducing the width of the columns.

Syntax:

CSS column-gap property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- For the value as normal, W3C has recommend the width as 1em.

Property Values

Value Description
<length> A length is used to set the gap in between the columns,it can be zero but not negative.
normal Browser defined default spacing is set between the columns. Usually, it 1em.

Specifications

Specs Value
Name column-gap
Value <length> | normal
Initial Value normal
Applies to Multicolumn Elements
Javascript syntax object.style.columnGap="10px"
Inherited No
Computed Value Absolute length or 'normal'.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.