CSS3 column-gap Property

Here is a brief description of how to specify the gap between the columns using the CSS3 column-gap property.

Explanation

Property :

column-gap: length|normal|initial|inherit;


Where,
length - A specified length that will set the gap between the columns.
normal - Default value. Specifies a normal gap between the columns.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


column-gap: 40px;

Definition:

The column-gap property specifies the gap between the columns. If there is a column-rule between columns, it will appear in the middle of the gap

Example :
<style>
.demodiv {
width:500px;
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-gap: 20px;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
}
</style>
<div class='demodiv'>
We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users.
Free website contents that help to develop, build, promote and maintain a web site.
</div>

Result:

We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users. Free website contents that help to develop, build, promote and maintain a web site.


Ask Questions

Ask Question