Column gap property (column-gap)

The property column-gap provides or specifies the wanted gap between columns in a manner that the same gap is applied between each column.

The values may be expressed in length (px, em…) or as keywords: normal, initial, inherit. The value normal is default and suggested by W3C to be at 1em.

Syntax:

selector {

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

}

Values:

length; Represents length of the gap between the columns.
normal; This, being default value, sets the ga to "normal" or in other words suggested by W3C (1.0em)
initial, inherit

Example

The column-gap property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; font-size:smaller; color:#444; 
    background-color:#fff;
  }
.column
 {
    column-gap: 5px;   
        -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
        -moz-column-gap: 5px; /* Firefox */
    column-count: 3;
   	    -webkit-column-count: 3; /* Chrome, Safari, Opera */
   	    -moz-column-count: 3; /* Firefox */
} 
</style>
</head>
<body>

<h3>Text divided into 3 columns with changed gap between them</h3>
<div class ="column">
The value number is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.
The value auto is a default value for column-count property and, if used, it indicates that the number of columns should be determined by other CSS properties, like column-width.
Other two possible values, initial and inherit are self-explanatory. More about them learn in CSS2 tutorial.
</div>
  
  <br /><p><strong>NOTE:</STRONG> Try changing the number (in PIXELS).</p>
  
</body>
</html>

›› go to examples ››

Column gap property (column-gap)

Syntax:

Values:

Example

The column-gap property example:

Comments

About

Contact

Get Connected