gap属性用于设置布局中子元素间的间距，适用于grid、flex和多列布局；它简化了传统margin或padding的使用，支持一个值（行列等距）或两个值（分别定义行距和列距）；在grid中广泛支持，在flex中自Chrome 84起良好支持，且不影响容器边缘；现代浏览器兼容性较好，但IE不支持，建议在新项目中优先使用。
在CSS中，gap 属性是专门用来设置子元素之间的间距的，特别适用于 flexbox、grid 和 multicol 布局。它能简化传统使用 margin 或 padding 控制间距的方式，让布局更清晰、易维护。
什么是 gap 属性？
gap 是一个简写属性，用于同时设置行与列之间的间距（即行间距和列间距）。它可以用于以下布局容器：
- Grid 布局
- Flex 布局（从支持 gap 的浏览器开始）
- 多列布局（multi-column）
gap 可以接受一个或两个值：
gap: row-gap column-gap;如果只提供一个值，则该值同时用于行间距和列间距。
立即学习“前端免费学习笔记（深入）”；
在 Grid 布局中使用 gap
Grid 是 gap 应用最广泛的场景之一。你可以轻松地在网格项之间添加间距，而无需额外的 margin 操作。
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
上面代码会在每一行和每一列之间创建 20px 的间距。你也可以分别设置：
gap: 10px 20px; /* 行间距 10px，列间距 20px */在 Flex 布局中使用 gap
以往 flex 布局需要靠 margin 来控制子元素间距，容易出现边缘多余空白的问题。现在使用 gap 可以完美解决。
.flex-container { display: flex; gap: 16px; flex-wrap: wrap; }gap 在 flex 容器中同样有效，尤其适合卡片列表、按钮组等横向或换行排列的布局。注意：gap 不会影响容器边缘，只作用于项目之间。
兼容性与注意事项
现代浏览器对 gap 的支持已经很好，但在老版本浏览器（如 IE）中不被支持。使用时建议检查目标环境。
- Grid 中的 gap 支持良好（Chrome, Firefox, Safari, Edge 等）
- Flex 中的 gap 自 Chrome 84 起全面支持
- 避免在非布局容器（如 display: block）上使用 gap
基本上就这些。合理使用 gap 能让你的布局更简洁、语义更清晰，减少 hack 式的 margin 调整。推荐在新项目中优先采用。不复杂但容易忽略。
