CSS gap 语法
在 CSS 中，gap 是一个复合属性，用于同时设置 row-gap 和 column-gap 的值。
语法：
gap: row column;说明：
row 代表的是 row-gap 的取值，而 column 代表的是 column-gap 的取值。下面两种写法是等价的。
/* 写法 1 */
gap: 20px 40px;
/* 写法 2 */
row-gap: 20px;
column-gap: 40px;此外，gap 属性的值还可以是一个值。下面两种写法是等价的。
/* 写法 1 */
gap: 20px;
/* 写法 2 */
row-gap: 20px;
column-gap: 20px;对于 gap 属性，小伙伴们还要清楚以下几点。
- gap 只在存在多行或多列时才有效。
- gap 只在项目之间创建间距，不会在容器的边缘添加任何间距。
- column-gap 属性设置的是两列之间的距离，row-gap 属性设置的是两行之间的距离，而 gap 是 row-gap 和 column-gap 的复合属性。
CSS gap 摘要
| 属于 | CSS Flex 布局 / CSS Grid 布局 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 0 0 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS gap 示例
接下来，我们通过一个简单的例子来讲解一下 gap 属性是如何使用的。
示例：gap 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
display: flex;
gap: 20px;
width: 100%;
height: 500px;
background-color: skyblue;
}
.box > div {
width: 100px;
height: 100px;
border: 1px solid silver;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
gap 设置的是列与列之间的间隙。由于这里只有一行，因此我们再去设置 row-gap 是无效的，小伙伴们可以自行试一下。
