gap属性仅在display: grid或较新版本flex中生效，全兼容方案是grid；混用margin会导致间距叠加，应统一用gap并重置item的margin为0。
gap 属性不生效？检查父容器是否为 display: grid
很多情况下模块间距看起来“不一致”，其实是 gap 根本没起作用——因为父容器不是网格容器。gap 只在 display: grid 或 display: flex（仅 Firefox 支持 gap for flex，Chrome/Edge 104+ 才开始支持）下有效，但真正稳定、全浏览器兼容的只有 grid。
常见错误写法：
section { display: block; } /* 此时设置 gap: 16px 无任何效果 */
- 确认父元素设置了
display: grid或display: inline-grid - 避免误用
display: grid-flow（不存在）、display: grid-box（旧规范已废弃）等无效值 - 如果用了
display: subgrid，需确保其父网格已定义gap，子网格本身不继承gap，也不能独立设置
gap 和 margin 混用导致视觉错乱
一旦给网格项（grid item）加了 margin，就会和 gap 叠加，造成某些方向间距翻倍、相邻项之间出现“双倍空隙”或对齐偏移。
比如：父容器设了 gap: 12px，某个 item 又写了 margin-right: 8px，那么它和右边 item 的实际间距就变成 12px + 8px = 20px，而其他位置仍是 12px——这就是“不一致”的根源。
- 统一用
gap控制项间距离，所有网格项的margin应设为0（或显式重置） - 若需外边距（比如整个网格区域与页面其他内容隔离），只在父容器上设
margin，不要动 item - 需要某一项“撑开”单独间距？改用
grid-column/grid-row跨格，或加空占位项，而非靠 margin “挤”出来
gap 在不同方向表现异常？注意 row-gap / column-gap 的优先级
gap 是 row-gap 和 column-gap 的简写，但三者存在覆盖关系：当同时声明 gap 和单独的 row-gap，后者会覆盖前者对应方向的值。
例如：
报备邮件台账登记工具 — 解析 .eml（含 zip）提取关键信息，生成 Excel 台账供下载；支持模板追加、自动去重。触发词：整理邮件、报备邮件台账、邮件台账登记、邮件归档、报备登记、填写报备台账、邮件解析台账、email ledger。
.grid { gap: 8px; row-gap: 20px; }
结果是：行间距 20px，列间距仍为 8px。容易误以为“gap 没生效”。
- 调试时优先查 computed styles，看浏览器最终解析出的
row-gap和column-gap值 - 避免混用写法：要么全用
gap: 12px 24px（行 12px，列 24px），要么只用row-gap/column-gap单独控制 - 注意
gap: 12px等价于row-gap: 12px; column-gap: 12px；gap: 12px 24px中第一个值是row-gap，第二个是column-gap（别记反）
嵌套网格或响应式中 gap 不同步？用 CSS 自定义属性解耦
当多个网格组件共用同一套间距体系（如卡片列表、表单字段组、仪表盘区块），硬编码 gap: 16px 会导致修改困难、易遗漏。
更可靠的做法是提取为自定义属性，在根或上下文作用域中统一控制：
:root { --grid-gap: 16px; }
.card-grid { display: grid; gap: var(--grid-gap); }
.form-grid { display: grid; gap: var(--grid-gap); }
- 响应式场景下，可配合
@media动态改--grid-gap值，所有引用处自动更新 - 避免在嵌套网格中层层叠加 gap（比如外层
gap: 16px，内层又设gap: 8px），除非设计明确需要“嵌套节奏”，否则应保持语义清晰：外层控布局密度，内层控内容密度 - 注意 Safari 15.4 之前对
gap在subgrid中的支持不完整，如需兼容，暂避用 subgrid + gap 组合
真正让间距“一致”的关键，不是调哪个值更准，而是切断 margin 对网格流的干扰，并把 gap 当作唯一可信的间距信源。一旦开始混用，后续每次调整都会变成排查谜题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
