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

打印页面