CSS column-gap Property

CSS column-gap property specifies the gap between the columns of a HTML Element.

The syntax to specify a value for column-gap property is

</>
Copy
column-gap: Value;

The following table gives the possible values that could be given to column-gap property.

ValueDescriptionExamples
LengthA value in CSS Length Units.column-gap: 2em;
column-gap: 20px;
column-gap: 10%;
normalNormal gap recommended by W3C standard, which is 1em.
[Default Value]		column-gap: normal;
initialSets column-gap to default value.column-gap: initial;
inheritInherits column-gap value from its parent element.column-gap: inherit;

Examples

In the following examples, we set the gap between the columns of the HTML Element, using column-gap property, with different possible values.

column-gap: 2em;

In the following example, we set the gap between the columns with 2em length.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-gap: 2em;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-gap: normal;

In the following example, we set a normal gap between the columns of paragraph.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-gap: normal;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-gap in Percentage

In the following example, we set a gap of 20% between the columns of paragraph.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-gap: 20%;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about column-gap property, and how to use this property for HTML Elements, with examples.