CSS gap 属性是一个简写属性，用于设置弹性布局、网格布局和分栏局中行和列之间的间距（也称为 gutter），目前已经得到了现代浏览器的广泛支持。
引入 gap 的目的是简化了在这些布局中创建间距的过程，避免使用多个 margin 或 padding 属性的繁琐步骤。
gap 语法
gap 属性语法如下：
gap = <'row-gap'> <'column-gap'>?
可以看到，gap 其实是 row-gap 和 column-gap 2 个属性的的简写形式，row-gap 和 column-gap 分别用于控制行间距和列间距。
也就是说：
gap: 12px 24px;
/* 等同于 */
row-gap: 12px;
column-gap: 24px;
设置 gap 时，第二个值 column-gap 是支持省略的。如果没设置，与 row-gap 值一致。
gap: 12px;
/* 等同于 */
row-gap: 12px;
column-gap: 12px;
当然，完整的 gap 的取值单位包括 px、em、rem 在内的长度单位，甚至可以是一个百分比值。
示例:
- gap: 10px; 设置行间距和列间距均为 10 像素。
- gap: 20px 15px; 设置行间距为 20 像素，列间距为 15 像素。
- gap: 5%; 设置行间距和列间距均为容器尺寸的 5%。
应用场景
gap 属性主要用于上面所讲的三种布局。我们分别举例说明：
弹性布局
<div class="box-wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<style>
.box-wrapper {
display: flex;
gap: 12px 24px;
flex-wrap: wrap;
}
.box {
flex: 1 1 48%;
}
</style>
效果：
如图所示，行间距 12px，列间距 24px。
网格布局
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<style>
.container {
display: grid;
gap: 12px 24px;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
padding: 12px 16px;
text-align: center;
}
</style>
效果：
如图所示，行间距 12px，列间距 16px。
分栏布局
<div>
<p>
祥子的手哆嗦得更厉害了，揣起保单，拉起车，几乎要哭出来。拉到个僻静地方，细细端详自己的车，在漆板上试着照照自己的脸！
</p>
<p>
越看越可爱，就是那不尽合自己的理想的地方也都可以原谅了，因为已经是自己的车了。
</p>
<p>
把车看得似乎暂时可以休息会儿了，他坐在了水簸箕的新脚垫儿上，看着车把上的发亮的黄铜喇叭。
</p>
<p>
他忽然想起来，今年是二十二岁。因为父母死得早，他忘了生日是在哪一天。自从到城里来，他没过一次生日。
</p>
<p>
好吧，今天买上了新车，就算是生日吧，人的也是车的，好记，而且车既是自己的心血，简直没什么不可以把人与车算在一块的地方。
</p>
</div>
<style>
div {
columns: 2;
gap: 2em;
}
p {
margin-top: 0;
}
<style>
效果：
这里我们将列间距设置为 2em 的长度。
与 margin 的区别
使用 gap 属性比使用 margin 属性来创建间距更加简洁、高效。使用 margin 属性时，需要小心处理相邻元素和边界元素的 margin 问题，而 gap 属性则帮我们自动处理了。
总结
gap 属性在现代浏览器中得到了广泛支持，支持在包括弹性布局、网格布局和分栏布局在内的现代布局模型中使用，大大简化化了在创建间距的过程，使用 margin 或 padding 属性带来的繁琐和不便。
希望本文的讲述能对你的工作有所帮助，感谢阅读，再见。
