应使用gap替代margin控制卡片间距，因margin会导致末尾空白、margin合并及换行错乱；gap专用于flex/grid容器内子项间间距，不干扰盒模型，IE11等旧浏览器需用flex+calc()降级处理。
用 gap 替代 margin 控制卡片间距
卡片并排时最常犯的错，是给每张卡片加 margin-right 或 margin-bottom。这会导致末尾卡片多出空白、父子 margin 合并、响应式换行后间隙错乱。现代布局中，gap 是专为解决这类问题设计的属性，只作用于容器内部子项之间，完全不干扰单个卡片的盒模型。
适用前提：父容器必须是 display: flex 或 display: grid。
-
flex容器用gap: 16px（等价于row-gap: 16px; column-gap: 16px），Chrome 63+、Firefox 61+、Safari 14.1+ 均支持 -
grid容器同理，gap还能配合auto-fit实现自适应列数，比如：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 别在卡片自身设
margin来“模拟”间隙——它会让卡片宽度计算变复杂，尤其在flex: 0 0 calc(...)场景下极易溢出
当必须兼容旧浏览器（如 IE11）时怎么处理间隙
IE11 不支持 gap，也不能用 grid 的 auto-fit。此时降级方案不是退回 float，而是用 flex + padding 模拟间隙。
- 父容器设
display: flex; flex-wrap: wrap; - 每张卡片设
flex: 0 0 calc(33.333% - 16px);（三列布局，16px 为总间隙，每列分摊约 5.333px） - 再统一给卡片加
padding: 0 8px;，左右 padding 共同构成列间间隙；上下 padding 则用于内边距，与间隙逻辑分离 - 务必避免用
margin模拟间隙——IE 中flex的margin行为不稳定，容易导致最后一列掉行
为什么 gap 不生效？常见失效场景
gap 看似简单，但一写就失效，往往卡在这几个点上：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 父容器不是
flex或grid，比如还停留在inline-block或float布局——gap对这两者完全无效 - 卡片用了
display: inline-block并依赖 HTML 换行符产生间隙，此时gap不覆盖该行为，反而让视觉混乱加倍 - 容器设置了
overflow: hidden且卡片有负 margin 或 transform，可能裁剪掉部分 gap 区域（虽罕见，但在悬停动画中偶发） - 使用了
grid但写了grid-template-areas却没留空格位置——gap仍存在，但被显式轨道定义覆盖视觉表现
移动端换行后间隙突变怎么办
用 flex-wrap: wrap 或 grid 做响应式时，小屏下单列显示，但顶部/底部间隙可能比多列时更大——这是因为 gap 在单行/单列时依然生效，而人眼对垂直间隙更敏感。
解决思路不是删 gap，而是分层控制：
- 水平间隙保持一致：
column-gap: 16px - 垂直间隙单独设：
row-gap: 24px，并在小屏媒体查询中收紧：@media (max-width: 768px) { .card-grid { row-gap: 16px; } } - 如果卡片高度差异大，row-gap 过大会暴露对齐缺陷，此时应确保卡片自身用
display: flex; flex-direction: column+flex-grow: 1统一底部锚点，而不是靠 gap “撑开”空间
真正难调的从来不是间隙数值，而是卡片内部结构是否稳定——间隙只是表象，内容高度浮动才是抖动根源。
