CSS - gap 屬性

CSS gap 屬性定義了網格、彈性盒或多列布局中專案之間的間距。它用於使用單個值或兩個值來指定行間距和列間距。它是row-gap 和 column-gap 屬性的簡寫屬性。

語法

gap: row-gap column-gap | initial | inherit;

屬性值

值	描述
row-gap	它設定彈性盒或網格佈局中行之間的間距。
column-gap	它設定彈性盒、網格或多列布局中列之間的間距。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS gap 屬性示例

以下示例說明了在不同佈局中使用gap 屬性。

使用 Flexbox 佈局的 gap 屬性

要在 Flexbox 佈局中同時新增行方向和列方向的間距，我們使用gap 屬性。如果給定單個值（例如 10px），則它將平等地應用於行間距和列間距。如果給定兩個值（例如 10px 5px），則第一個值設定行間距，第二個值設定列間距。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .containers {
            border: 1px solid gray;
            background-color: lightgray;
            padding: 12px;
            display: flex;
            flex-wrap: wrap;
        }

        .containers>div {
            border: 1px solid gray;
            text-align: center;
            color: white;
            width: 20%;
            background-color: #4CAF50;
        }

        .container1 {
            gap: 50px;
        }

        .container2 {
            gap: 50px 20px;
        }
    </style>
</head>

<body>
    <h2>
        CSS gap property
    </h2>
    <h4>
        gap: 50px (applies to both row and column);
        layout: flex
    </h4>
    <div class="containers container1">
        <div>
            1
        </div>
        <div>
            2
        </div>
        <div>
            3
        </div>
        <div>
            4
        </div>
        <div>
            5
        </div>
        <div>
            6
        </div>
        <div>
            7
        </div>
    </div>
    <h4>
        gap: 50px 20px (row gap- 50px, 
        column gap- 20px); layout: flex
    </h4>
    <div class="containers container2">
        <div>
            1
        </div>
        <div>
            2
        </div>
        <div>
            3
        </div>
        <div>
            4
        </div>
        <div>
            5
        </div>
        <div>
            6
        </div>
        <div>
            7
        </div>
    </div>
</body>

</html>

使用 Grid 佈局的 gap 屬性

要在 Grid 佈局中同時新增行方向和列方向的間距，我們使用gap 屬性。如果給定單個值（例如 10px），則它將平等地應用於行間距和列間距。如果給定兩個值（例如 10px 5px），則第一個值設定行間距，第二個值設定列間距。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .containers {
            border: 1px solid gray;
            background-color: lightgray;
            padding: 12px;
            display: grid;
            grid-template-columns: auto auto auto;
        }

        .containers>div {
            border: 1px solid gray;
            text-align: center;
            color: white;
            background-color: #4CAF50;
        }

        .container1 {
            gap: 20px;
        }

        .container2 {
            gap: 40px 45px;
        }
    </style>
</head>

<body>
    <h2>
        CSS gap property
    </h2>
    <h4>
        gap: 20px (applies to both row and column);
        layout: grid
    </h4>
    <div class="containers container1">
        <div>
            1
        </div>
        <div>
            2
        </div>
        <div>
            3
        </div>
        <div>
            4
        </div>
        <div>
            5
        </div>
        <div>
            6
        </div>
        <div>
            7
        </div>
    </div>
    <h4>
        gap: 40px 45px (row gap- 40px, 
        column gap- 45px); layout: grid
    </h4>
    <div class="containers container2">
        <div>
            1
        </div>
        <div>
            2
        </div>
        <div>
            3
        </div>
        <div>
            4
        </div>
        <div>
            5
        </div>
        <div>
            6
        </div>
        <div>
            7
        </div>
    </div>
</body>

</html>

使用多列布局的 gap 屬性

要在 Flexbox 佈局中新增列方向的間距，我們使用gap 屬性。它接受單個值（例如 10px）並設定列間距。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            border: 1px solid gray;
            background-color: lightgray;
            padding: 12px;
            columns: 3;
            gap: 50px;
        }
    </style>
</head>

<body>
    <h2>
        CSS gap property
    </h2>
    <h4>
        gap: 50px (applies to the column gap);
        layout: multi-column
    </h4>
    <div class="container">
        <p>
            TutorialsPoint provides a comprehensive range of
            online tutorials and courses on various technology
            and programming topics. It offers detailed, 
            easy-to-follow guides and interactive content
            for learners at all levels. With subjects
            spanning web development, data science, and software
            tools, TutorialsPoint aims to deliver practical 
            knowledge and skills through user-friendly resources
            and hands-on learning experiences.
        </p>
    </div>
</body>

</html>

支援的瀏覽器

屬性
gap	84.0	84.0	63.0	14.1	70.0

css_properties_reference.htm

列印頁面