用margin设卡片间距会出错，因margin属单个元素盒模型，无法识别行尾/列末，导致最后一行/列多出空白；gap是唯一解耦方案，需父容器设display:flex或grid并配合flex-wrap:wrap或grid-template-columns。
为什么用 margin 直接设卡片间距会出错
直接给每个卡片加 margin-right: 16px 或 margin-bottom: 16px，最后一行或最后一列总会多出无意义的空白，导致容器内边不对齐、内容溢出或响应式断点错位。根本原因是 margin 属于单个元素盒模型的一部分，无法感知“行尾”或“列末”，浏览器不会自动忽略它。
gap 是唯一真正解耦间距与元素自身的方案
gap 是 display: flex 和 display: grid 的原生属性，它作用于容器，不污染子项尺寸计算，也不触发 margin 合并或塌陷。只要父容器设了 display: flex 或 grid，就能安全控制行列间隙：
- Flex 卡片流：用
flex-wrap: wrap+gap: 12px，无需算减法，不依赖calc() - Grid 卡片流：用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)))+gap: 16px，列数自适应，间隙恒定 - 注意：IE11 不支持
gap，若必须兼容，改用负 margin 技法 —— 父容器margin: -8px，卡片padding: 8px
移动端卡片流要避免“视觉外边距丢失”
原生 App 常见的“左右留白 + 卡片内撑开”效果，在 Web 中容易被误写成全屏卡片 + 外边距，结果小屏下卡片宽度超限、文字换行异常。正确做法是：
- 容器设
padding: 0 16px（左右留白），而非靠卡片自身margin撑开 - 卡片宽度用
flex: 0 0 100%（单列）或flex: 0 0 calc(50% - 16px)（双列），其中16px是gap的一半值，确保总和不超 100% - 图片区域必须加
height: 100%+object-fit: cover，否则高度不一致会导致卡片基线错乱，视觉上像“外边距不齐”
别让 box-sizing 成为间距失控的隐形推手
如果卡片用了 border 或 padding 却没设 box-sizing: border-box，那实际宽度 = width + padding + border，三列布局极易因多出几个像素而强制换行——尤其在 retina 屏或缩放 110% 时更明显。
立即学习“前端免费学习笔记（深入）”；
务必在重置样式或卡片基础类中统一声明：* { box-sizing: border-box; } 或至少 .card { box-sizing: border-box; }。这是所有间距精准的前提，不是可选项。
