Skip to content
Related Articles

Related Articles

Improve Article
CSS | column-gap Property
  • Last Updated : 16 Dec, 2020

The column-gap property in CSS is used to specify the amount of gap between the columns in which a given text is divided using the column-count property. 

Syntax:

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

Property Values:

  • length: This value specifies the length that will set the gap between the columns.
  • normal: This is the default value. This value is used to specify a normal gap between the columns.
  • initial: This value is used to set the column-gap property to it’s default value.
  • inherit: This value tells the column-gap property to inherit the property from its parent.

Example:




<!DOCTYPE html>
<html>
<head>
    <title>The column-gap Property</title>
    <style
    .gfg {
        -webkit-column-count: 3; 
        -moz-column-count: 3; 
        column-count: 3;
          
        -webkit-column-gap: 40px; 
        -moz-column-gap: 40px; 
        column-gap: 40px; /* Specifying Column Gap */
    }
      
    h1 {
        color:green;
    }
      
    h1, h2 {
        text-align:center;
    }
    </style>
</head>
  
<body>
    <h1>
        GeeksforGeeks
    </h1>
      
    <h1>
        The column-gap Property
    </h1>
      
      
<p>
        The column-gap property defines the gap 
        between the columns of the element:
    </p>
  
      
    <!-- The text inside below div tag is divided in 
        3 columns with a gap of 40px between 
        the columns -->
    <div class="gfg">
        The course is designed for students as well as 
        working professionals to prepare for coding
        interviews. This course is going to have coding
        questions from school level to the level 
        needed for product based companies like Amazon,
        Microsoft, Adobe, etc.
    </div>
</body>
</html>                    

Output:

Supported Browsers: The browsers supported by column-gap Property are listed below:

  • Google Chrome 50.0, 4.0 -webkit-
  • Internet Explorer 10.0
  • Firefox 52.0, 2.0 -moz-
  • Opera 9.0, 3.1 -webkit-
  • Safari 37.0, 15.0 -webkit



My Personal Notes arrow_drop_up
Recommended Articles
Page :