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。遇到不生效，优先验证：
- 父容器的
display值是不是确实是flex或grid（检查是否被后代样式重写，比如display: block !important） - 卡片是否被包了多余的 wrapper 元素（例如每张卡片外多套了一层
<div class="wrapper">），导致卡片不再是容器的直接子元素 - 是否在用伪元素（如
::before）生成卡片内容——伪元素不参与gap计算
真正复杂的卡片流式布局，gap 是最轻量、最可控的解法；一旦开始混用 margin 和 padding 手动调，就等于主动放弃布局一致性。
