# CSS3 column-gap Property ## Instance Set the gap between the text columns: ```css div { column-count:3; column-gap:40px; -moz-column-count:3; /* Firefox */ -moz-column-gap:40px; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ -webkit-column-gap:40px; /* Safari and Chrome */ } ``` [Try it yourself »]( --- ## Browser Support The numbers in the table indicate the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that works with a prefix. | Property | | | | | | |----------|-----|-----|-----|-----|-----| | column-gap | 50.0 | 12.0 | 52.0
6.0 -moz- | 9.0 | 37.0 | ## Property Definition The column-gap property specifies the gap between columns. | Default value: | normal | |----------------|---------| | Inherited: | no | | Animation available: | yes | | Version: | CSS3 | | JavaScript syntax: | object.style.columnGap="50px" | ## Property Values | Value | Description | |-------|-------------| | normal | Default value. Specifies a normal gap between columns. The default gap is 1em. | | length | A specific length unit (px, pt, cm, em, etc.) to specify the gap between columns. | ## Related Articles [Tutorial: CSS3 Columns]( [CSS Reference Manual: column-count Property]( [CSS Reference Manual: column-rule Property]( --- ## More Examples ### Example 1 Set the gap between the columns to 100px: ```css div { -webkit-column-count:3; /* Chrome, Safari, Opera */ -moz-column-count:3; /* Firefox */ column-count:3; -webkit-column-gap:100px; /* Chrome, Safari, Opera */ -moz-column-gap:100px; /* Firefox */ column-gap:100px; } ``` [Try it yourself »]( ### Example 2 Set the gap between the columns to normal: ```css div { -webkit-column-count:3; /* Chrome, Safari, Opera */ -moz-column-count:3; /* Firefox */ column-count:3; -webkit-column-gap:normal; /* Chrome, Safari, Opera */ -moz-column-gap:normal; /* Firefox */ column-gap:normal; } ``` [Try it yourself »]( --- ## Related Property ( Specifies the number of columns to divide the element into ( Specifies how to fill columns ( Sets all column-rule properties in a single declaration ( Specifies the color of the rule between columns ( Specifies the style of the rule between columns ( Specifies the width of the rule between columns ( Specifies how many columns an element should span across ( Specifies the width of the columns ( A shorthand property for setting column-width and column-count --- ( Change]( ## User Comments (4) 1. **Anonymous User** - 2017-04-26 10:27:32 ``` newspaper { column-count:3; column-gap:30px; column-rule:3px outset #ff00ff; }

Test title

test content

test content

test content

``` (javascript:void(0);) (javascript:void(0);) 2. **Anonymous User** - 2017-08-02 09:39:18 This article is well written. This attribute is very useful! (javascript:void(0);) (javascript:void(0);) 3. **Anonymous User** - 2017-08-10 08: key: e3c65f44 ``` .newspaper { -webkit-column-count:2; /* Chrome, Safari, Opera */ -moz-column-count:2; /* Firefox */ column-count:2; -webkit-column-gap:40px; /* Chrome, Safari, Opera */ -moz-column-gap:40px; /* Firefox */ column-gap:40px; -webkit-column-rule:3px outset #ff00ff; /* Chrome, Safari, Opera */ -moz-column-rule:3px outset #ff00ff; /* Firefox */ column-rule:3px outset #ff00ff; } ``` (javascript:void(0);) (javascript:void(0);) 4. **Anonymous User** - 2021-03-01 02:25:47 The gap attribute only sets the gap between columns. If you also want to set the gap between the content and the edge of the container, you need to use margin or padding. (javascript:void(0);) (javascript:void(0);) --- ## Related Video Tutorial (javascript:void(0);) --- ## Navigation [❮ Previous]( ❯]( ( --- ## Share This Tutorial Share on: (javascript:void(0);)(javascript:void(0);)[Google+](javascript:void(0);)(javascript:void(0);)(javascript:void(0);) --- © Copyright 2015 - 2025 ( Training]( you](