gap仅在flex或grid容器上生效，普通block容器无效；row-gap需配合flex-wrap:wrap才起作用；Safari 14.0–14.4需拆分为row-gap/column-gap声明；首尾留白须用padding而非gap。
gap 必须用在 flex 或 grid 容器上，普通 div 不生效
购物车条目（如每件商品的 .cart-item）要靠 gap 等距排列，父容器必须是 display: flex 或 display: grid。写成 display: block 的 .cart-list 上加 gap: 12px，浏览器直接忽略——DevTools 的 “Computed” 面板里根本看不到该值。
常见错误结构：
<div class="cart-list"> <div class="cart-item">...</div> <div class="cart-item">...</div> </div>
正确做法是给 .cart-list 加：
-
display: flex+flex-direction: column（垂直列表，最常用） - 或
display: grid+grid-template-columns: 1fr（语义更清晰，但列数固定时更推荐 flex）
Flex 布局中 row-gap 生效的前提：必须 wrap 才管换行
购物车偶尔会横向展示多件商品（比如“猜你喜欢”区块），这时用 flex-direction: row + flex-wrap: wrap，row-gap 才控制行与行之间的空隙。如果只写 flex-wrap: nowrap，哪怕设了 row-gap: 16px，它也完全不生效——因为只有一行，没有“行之间”可言。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 子项用了
flex-shrink: 0且内容过宽，导致无法换行，row-gap形同虚设 - 父容器高度被限制死（如
max-height: 300px），实际渲染仍为单行，row-gap看不见 - 混用
gap: 12px和row-gap: 8px，后者会覆盖行间距，列间距却还是 12px，视觉错乱
移动端 Safari 14.0–14.4 必须拆开写 row-gap/column-gap
iOS 14.0–14.4 对应的 Safari 版本（覆盖约 3% 用户）会静默忽略所有 gap 简写，包括 gap: 12px 和 gap: 8px 16px。你在真机上看到购物车条目紧贴在一起，不是 CSS 没加载，而是浏览器压根不认这个属性。
安全写法只有一条：不用 gap，直接分开声明：
.cart-list {
display: flex;
flex-direction: column;
row-gap: 12px;
column-gap: 0; /* 明确设为 0，避免继承或层叠干扰 */
}
这样写，Chrome for Android、Firefox iOS、Safari ≥14.0 全部兼容，且语义明确，调试时一眼看出意图。
首尾留白不能靠 gap，得用 padding 或 margin
gap 只控制直系子元素之间，对容器边缘毫无影响。购物车顶部常需留出 16px 间距避开标题，底部留 24px 连接结算按钮——这些必须由容器自身承担：
- 统一用
padding-top: 16px; padding-bottom: 24px，干净可控 - 避免给第一个
.cart-item加margin-top、最后一个加margin-bottom，动态增删条目时逻辑易断 - 若购物车支持折叠/展开，用
padding也能随高度变化自然过渡，而 margin 会撑开容器导致布局跳动
真正难的不是让条目等距，而是当设计稿要求“已选商品间距 12px、未选中商品组间距 24px”时，你得意识到 gap 是容器级统一控制——这种差异必须拆成两个独立容器，而不是试图用 :nth-child 去 hack 子项的 margin。
