CSS Properties: How to specify a normal gap between the columns?

Last update on February 21 2024 12:45:16 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to specify a normal gap between the columns</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
.content-box{ /* Defines styles for elements with the class "content-box" */
border: 10px solid #000000; /* Sets the border of elements with the class "content-box" to 10 pixels solid black */
-moz-column-count: 3; /* Sets the number of columns for elements with the class "content-box" to 3; specific to Mozilla browsers */
-webkit-column-count: 3; /* Sets the number of columns for elements with the class "content-box" to 3; specific to WebKit browsers */
column-count: 3; /* Sets the number of columns for elements with the class "content-box" to 3 */
-webkit-column-gap: 20px; /* Sets the gap between columns for elements with the class "content-box" to 20 pixels; specific to WebKit browsers */
-moz-column-gap: 20px; /* Sets the gap between columns for elements with the class "content-box" to 20 pixels; specific to Mozilla browsers */
column-gap: normal; /* Sets the gap between columns for elements with the class "content-box" to the browser's default value */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<div class="content-box"><!-- Starts a division element with a class of "content-box" -->
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts a paragraph element with text describing CSS -->
<h1>w3resource Tutorial</h1><!-- Inserts another h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts another paragraph element with text describing CSS -->
</div><!-- Ends the division element with a class of "content-box" -->
</body>
</html>

Explanation:

This HTML document demonstrates how to specify a normal gap between columns in a CSS layout.
The CSS style block defines rules for elements with the class "content-box".
The border property sets the border of elements with the class "content-box" to 10 pixels solid black.
The -moz-column-count, -webkit-column-count, and column-count properties set the number of columns to 3 for browsers that support the respective prefixes and the standard property.
The -webkit-column-gap, -moz-column-gap, and column-gap properties set the gap between columns to 20 pixels for browsers that support the respective prefixes and the standard property, except for column-gap, which is set to "normal" to use the browser's default gap value.
The HTML body contains a division element with a class of "content-box", which contains multiple h1 and p elements.
The content in the division element will be displayed in three columns, with a border of 10 pixels and a normal gap between each column.

Live Demo:

See the Pen column-gap-normal-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page