gap属性用于设置Flex和Grid布局中项目间的间距，可替代margin；它是row-gap和column-gap的简写，支持同时定义行列间距，适用于display为grid或flex且flex-wrap换行的容器，能避免外边距重叠、简化代码，但需注意IE等旧浏览器不支持。
在CSS布局中，gap 属性可以轻松设置Flex和Grid容器内项目之间的间距，无需再使用外边距（margin）来控制间隔。它让布局更清晰、代码更简洁。
什么是gap属性
gap 是 row-gap 和 column-gap 的简写，用于定义网格或弹性盒子中行与列之间的间距。它适用于 flex 和 grid 布局模式。
在Grid布局中使用gap
Grid是gap最常用的场景之一，能同时控制行和列的间距。
示例：.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px; /* 行和列间距都是20px */
}
也可以分别设置：
立即学习“前端免费学习笔记（深入）”；
.container {
gap: 10px 20px; /* row-gap 为 10px，column-gap 为 20px */
}
在Flex布局中使用gap
从现代浏览器支持开始，gap 也能用于 flex 容器，尤其适合多行或多列的弹性布局。
示例：.flex-container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 子项之间水平和垂直间距均为16px */
}
注意：gap在flex中的作用效果要求容器设置 flex-wrap: wrap，否则多行间距可能不生效。也可单独设置：
.flex-container {
gap: 8px 12px; /* 垂直间距8px，水平间距12px */
}
gap的优势与注意事项
- 自动处理相邻元素间的空白，避免外边距重叠问题
- 不需要给子元素加 :last-child 或 :not(:last-child) 来清除多余margin
- 在响应式设计中更容易统一管理间距
- 旧版浏览器（如IE）不支持gap，需考虑兼容性
基本上就这些。用好 gap 能显著简化布局样式，特别是在Grid和多行Flex布局中非常实用。只要确保容器 display 设置正确，并注意浏览器支持即可。
