gap不能用margin替代，因gap作用于轨道间且不参与盒模型计算，而margin属于子项自身外边距，会干扰flex/grid空间分配；常见错误是给img设margin导致溢出或换行错位。
gap 为什么不能用 margin 替代
gap 是 Grid 和 Flex 容器的原生属性，它作用于轨道（track）之间，不参与子项的盒模型计算；而 margin 是子项自身的外边距，会干扰 flex: 1 或 grid-column 的空间分配逻辑。常见错误是给 img 写 margin: 8px，结果小屏下最后一行图片因 margin 溢出容器，或在 Flex 中触发换行错位。
必须统一用容器级 gap：
- Grid 布局写 gap: 12px
- Flex 布局也支持 gap（2026 年所有主流浏览器均已支持）
- IE10/11 可降级为 grid-column-gap: 12px; grid-row-gap: 12px，但 Flex 下无等效 fallback，建议放弃 IE 支持
aspect-ratio 怎么和 gap 共存不打架
aspect-ratio 给的是内容占位比例，gap 控制的是轨道间距，二者完全正交——只要你不把 aspect-ratio 错加到容器上（比如给 .gallery 设 aspect-ratio），就不会冲突。
正确做法是：
- 每张图的直接父元素（如 <figure class="photo-item"></figure>）设 aspect-ratio: 4/3
- 同时该父元素设 width: 100%、height: auto
- 容器（.gallery）只管 display: grid 和 gap，不管比例
- 若某张图特别高（如 9:16 竖图），加 align-self: start 防止拉高整行
gap 太大导致小图被“撑开”怎么办
这不是 gap 的问题，而是图片没约束宽高导致的渲染异常。当列宽被 gap 占去较多空间，剩余宽度变小时，如果 img 缺少 max-width: 100%，原始尺寸大的图就会撑破格子，看起来像“被撑开”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键控制点：
- 所有 img 必须带 max-width: 100% 和 height: auto
- 不要给 img 写死 width 或 height（包括内联 style）
- 如果用了 object-fit: cover，必须配套设容器宽高（如父元素 aspect-ratio 或显式 height）
- 检查是否误在 img 上写了 margin，它会叠加 gap 导致实际间距翻倍
响应式 gap 怎么避免在窄屏下“挤脸”
固定像素 gap: 12px 在手机上可能显得过大，但用百分比又不可靠（gap 不支持 % 单位）。真正可控的方式是用 clamp() 或媒体查询分级控制。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
- gap: clamp(6px, 2.5vw, 12px)：最小 6px，随视口宽度线性增长，上限 12px
- 或分段：@media (max-width: 480px) { .gallery { gap: 6px; } }
- 切忌用 gap: 1rem，它依赖根字体大小，而相册页常重置 font-size，容易失准
- 如果用 Flex 布局且需折行，务必加 flex-wrap: wrap，否则 gap 在单行模式下无效
最容易被忽略的是：gap 和 aspect-ratio 都依赖浏览器对 intrinsic 尺寸的识别。一旦图片本身 EXIF 宽高信息被压缩工具清空（比如早期 tinypng），aspect-ratio 就会失效，gap 看着正常，但整行布局仍会抖动。上线前用 Network 面板检查图片响应头里的 Content-Length 和原始尺寸是否匹配。
