gap属性用于设置布局中子元素间的间距，支持Flexbox和Grid布局。一个值时行列间距相同，两个值时分别设置行间距和列间距，单位包括px、rem、em、%等。在Grid布局中，gap能轻松控制网格行列间隙，如gap: 20px;创建三列等宽网格并设置间距；也可单独设置row-gap和column-gap。Flex布局现也支持gap，尤其适用于flex-wrap换行的容器，如gap: 15px;用于响应式卡片布局，避免传统margin带来的首尾多余空白问题。相比margin，gap语义更清晰，不会产生外边距折叠或边缘多余间隔，逻辑更直观且支持响应式设计。建议在现代布局中优先使用gap替代margin控制项目间距，提升代码可读性与维护性。
CSS中的gap属性是布局中控制子元素之间间距的强大工具，尤其在Flexbox和Grid布局中非常实用。它能简化传统使用margin或padding来控制间距的复杂方式，让代码更清晰、维护更方便。
gap属性的基本语法
gap用于设置行与列之间的间距，可以接受一个或两个值：
- 一个值时：表示行和列的间距相同
- 两个值时：第一个是行间距（row-gap），第二个是列间距（column-gap）
支持的单位包括px、rem、em、%等。
例如：gap: 10px;
gap: 1rem 2rem;
gap: 20px 10%;
在Grid布局中使用gap
Grid是gap最自然的应用场景。它可以轻松控制网格行和列之间的空隙。
立即学习“前端免费学习笔记（深入）”；
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
这会创建三列等宽的网格，每个格子之间都有20px的间距，包括横向和纵向。
也可以分别设置：
row-gap: 30px;
column-gap: 10px;
或者合并写成：
gap: 30px 10px;
在Flex布局中使用gap
过去Flex布局不支持gap，但现代浏览器已广泛支持。在display: flex容器上可以直接使用。
display: flex;
flex-wrap: wrap;
gap: 15px;
这对于创建响应式卡片布局特别有用，无需再为每个子项设置外边距，避免边缘多余空白。
注意：gap在单行不换行的Flex容器中依然有效，但仅作用于主轴方向上的项目间隔。
gap的优势与使用建议
相比传统的margin方式，gap有明显优势：
- 不会产生“首尾多余间距”问题
- 语义清晰，专门用于布局间隙
- 在Grid中自动处理行列空隙，逻辑更直观
- 支持响应式单位，适配灵活
建议在所有支持的布局中优先使用gap替代margin来控制项目间距，尤其是在容器内部元素对齐和分布较为复杂的场景。
基本上就这些，合理使用gap能让CSS布局更简洁高效。
