gap比margin更适合卡片布局，因其是容器级属性，只作用于直接子元素间间隙，不触发外边距合并，避免首尾多余空白；但需卡片为flex或grid的直接子元素。
为什么 gap 比 margin 更适合卡片布局
卡片间距不统一，往往是因为用 margin 手动控制每张卡片的上下左右边距，结果在首尾或换行时出现多余空白。而 gap 是容器级属性，只作用于直接子元素之间的间隙，不触发外边距合并，也不影响容器自身内外边距，天然规避“第一张/最后一张多出空隙”的问题。
适用前提是：卡片必须是 display: flex 或 display: grid 的直接子元素。如果用 inline-block 或纯 float，gap 完全无效。
在 Flex 布局中正确启用 gap
Flex 容器默认不支持 gap（旧版 Safari 甚至部分 Chrome 版本需加前缀），必须确认浏览器兼容性。现代项目建议直接使用无前缀写法，但需留意：
-
gap在flex-direction: column时控制垂直间距，在row时控制水平间距 - 不能用
gap单独设置横向或纵向——要分开写row-gap和column-gap - 若卡片宽度固定且容器宽度不足以容纳两列，
flex-wrap: wrap必须开启，否则gap只在单行生效
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
Grid 布局下 gap 的常见误用点
Grid 中 gap 行为更直观，但也容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 写成
grid-gap（已废弃）会导致部分浏览器失效，一律用gap - 当用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))时，gap会严格作用于每列之间，但不会在容器边缘产生额外空白——这点比padding+margin组合干净得多 - 如果卡片内部有
margin，它和gap不叠加，但会让卡片“看起来”更挤，建议卡片内部清空margin
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
当 gap 不生效时先查这三件事
不是所有“看起来像卡片”的结构都能用 gap。遇到不生效，优先验证：
