Tidadigi Logo

CSS column-gap Property

Thuộc tính column-gap trong CSS chỉ định khoảng cách giữa các cột. Các cột này được tạo ra khi chia văn bản bằng thuộc tính column-count.

Cú pháp:

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

Giá trị mặc định: normal 

Giá trị thuộc tính:

Giá trị thuộc tính

Mô tả

length

Giá trị này chỉ định độ dài khoảng cách giữa các cột.

normal

Đây là giá trị mặc định, nó chỉ định khoảng cách bình thường giữa các cột.

initial

Giá trị này đặt thuộc tính column-gap về giá trị mặc định của nó.

inherit

Giá trị này yêu cầu thuộc tính column-gap kế thừa từ phần tử cha.

Ví dụ: Ví dụ này minh họa cách sử dụng thuộc tính column-gap trong CSS.

html 
<!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>

Đầu ra:

css-column-gap-property

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ column-gap Property được liệt kê dưới đây:

  • Google Chrome 1 trở lên
  • Edge 12 trở lên
  • Internet Explorer 10 trở lên
  • Firefox 1.5 trở lên
  • Opera 11.1 trở lên
  • Safari 3 trở lên

Last Updated : 21/07/2025