在 CSS 中,gap 是 布局容器(flex 或 grid)的属性。它用于设置容器内子元素之间的间距。

在 CSS 中,gap布局容器flexgrid)的属性。它用于设置容器内子元素之间的间距。以下是 gap 属性在不同布局中的应用:

1. 在 CSS Grid 布局中

  • gap 定义了网格行和列之间的间距。
  • 可以分别使用 row-gapcolumn-gap 设置行间距和列间距。
.grid-container {
    display: grid;
    gap: 20px; /* 设置行和列的统一间距 */
    /* 或者分别设置行间距和列间距 */
    row-gap: 20px; 
    column-gap: 10px;
}

2. 在 Flex 布局中

  • 从 CSS 的规范中 gap 也可以用于 flex 布局,用于子元素之间的间距。
.flex-container {
    display: flex;
    gap: 15px; /* 设置 flex 子项之间的间距 */
}

总结

  • gap 可用于 gridflex 容器。
  • 它简化了设置子元素间距的方式,而不需要额外的 margin

在这里插入图片描述

上一篇:5.Java 数组(一维数组、二维数组、数组实例实操)-一、数组


下一篇:机器学习(三)——决策树(附核心思想、重要算法、概念(信息熵、基尼指数、剪枝处理)及Python源码)