gap仅在display: flex或grid容器中生效，需确保父容器正确设置且子项未脱离文档流；设计稿标注间距需对应同容器内元素，不可用于父子或跨容器场景。
gap 不是设计稿里直接标出来的值，而是你根据标注反推出来的布局约束。它只在 display: flex 或 display: grid 容器中生效，且不能替代 margin 或 padding——用错地方，页面就塌。
设计稿里根本没写 gap，那怎么知道该用多少？
设计稿通常只标两个元素之间的“间距”，比如“按钮和文字之间 24px”。这个数值，就是你代码里 gap 的候选值，但前提是：这两个元素必须同属一个 flex 或 grid 容器。如果它们是父子关系、或跨了不同容器，gap 就完全无效。
- 检查 Figma 图层结构：是否被包在同一个 Auto Layout Group 里？如果是，且方向设为 Horizontal/Vertical，那它大概率对应
gap - 警惕“视觉对齐陷阱”：两个元素看起来并排，但图层不在同一组 → 不能用
gap，得用margin或调整 DOM 结构 - 设计系统若有基准单位（如 8px），优先把标注值除以 8 取整：24px →
gap: 3rem（配合html { font-size: 8px; }）或gap: 1.5rem（默认 16px 基准）
gap 在 flex 和 grid 中的行为差异
gap 看起来一样，但在两种布局里的“生效前提”和“隐含影响”完全不同。
-
flex下：gap只作用于主轴（row）或交叉轴（column）上的相邻子项；若子项用了flex-wrap: wrap，换行后的行与行之间也会有 gap -
grid下：gap是行列双向的，row-gap和column-gap可单独控制；但注意：grid 的 gap 不会作用于grid-area跨越的区域内部 - 兼容性提醒：
gap在 flex 中 IE 完全不支持，Chrome 84+、Firefox 63+ 才稳定；若项目需兼容旧版，别依赖gap做核心间距逻辑
为什么写了 gap 页面还是不对？常见三类漏掉的条件
写了 gap: 20px 却没效果，90% 是因为下面某一条没满足：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器没设
display: flex或display: grid——gap不是全局样式，它只对特定 display 值有效 - 子元素用了
float、position: absolute或display: inline-block—— 这些会脱离文档流，不再参与 gap 计算 - 用了 CSS-in-JS 或 Tailwind，但未启用
gap相关插件或配置：比如 Tailwind 默认不开启gap工具类，需在tailwind.config.js的theme.extend.spacing里显式加入
从 Figma 到 HTML，gap 的落地要补哪几刀？
Figma 的 Auto Layout Gap 和代码里的 gap 不是 1:1 映射。工具生成的代码常忽略这几点：
- Auto Layout 的 “Padding” 被错误转成
gap—— 实际应转为父容器的padding - 多个嵌套 Auto Layout Group 导致生成多层
gap，视觉叠加后远超设计值 → 需手动合并或改用margin - 响应式断点缺失：Figma 只标了一个尺寸下的 gap，但代码里需配合媒体查询，在小屏下缩为
gap: 12px或gap: 8px
最易被忽略的一点：gap 不会撑开容器本身的高度或宽度。如果你靠 gap “撑出”了某个区块的视觉高度，上线后一加内容或换字体，整个节奏就偏了——这种依赖必须转为明确的 min-height 或 padding 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
