如何在 row-col 布局中设定默认间距？

在 row-col 布局中，通常希望设置元素之间的默认间距，包括列（col）之间的间距。本文将介绍如何实现这一目标。

给定以下 html 代码：

<footer id="footer">
    <div class="rxc-wrap el-page-container bg-dark text-light">
        <div class="container py-5">
            <div class="row">
                <div class="col-12 col-lg-3">
                    <h4 class="el-title font-weight-normal mb-3 pb-2">about</h4>
                    <ul class="list-unstyled mb-0 d-flex flex-column" style="gap: .5rem">
                        <li>
                            <a href="?part=about-headmaster" class="text-light">headmaster</a>
                        </li>
                        <li>
                            <a href="?part=about-our-values" class="text-light">our values</a>
                        </li>
                        <li>
                            <a href="?part=about-history" class="text-light">history</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

可以使用以下 css 代码为 row-col 布局设置默认间距：

div.row {
    row-gap: 2rem;
}

通过设置 row-gap 属性，可以指定行（row）之间的垂直间距。在这个示例中，将 row-gap 设置为 2rem，这会在行的底部添加 2rem 的间距。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

请注意，row-gap 属性仅适用于 display: grid 或 display: flex 设置为 row 或 row-reverse 的元素。因此，需要确保 div.row 满足此条件。