Safari 14.0–14.4 不支持 gap 简写，必须改用 row-gap 和 column-gap 独立声明；且需确保 display: flex、flex-wrap: wrap 等基础条件满足，否则间隙静默失效。
移动端用 gap 布局，最常遇到的不是“写不对”，而是“写了却没效果”——尤其在 iOS 14.x（Safari 14.0–14.4）真机上，gap: 16px 会完全静默失效，DevTools 的 Computed 面板里根本看不到它。
为什么 Safari 14.0 的 gap 总是“不生效”
这不是你漏写了 display: flex，也不是 CSS 没加载，而是 Safari 14.0 根本不解析 gap 简写（无论单值还是双值），包括 -webkit-gap 也无效。它只认 row-gap 和 column-gap 这两个独立属性。
- 现象：加了
gap: 16px后卡片紧贴在一起，检查 Computed 面板发现gap字段为空 - 验证方式：改写成
row-gap: 16px; column-gap: 16px;，立刻生效 - 覆盖范围：iOS 14.0–14.4 对应的 Safari 版本，截至 2026 年 10 月仍占约 3% 的存量用户
Flex 容器中 row-gap 为啥有时“看不见”
row-gap 不是加了就一定有视觉间距，它依赖 Flex 布局的基础运行条件。即使属性名写对了，以下任一条件不满足，间隙都会“消失”：
- 父容器必须是
display: flex或display: inline-flex，display: block下所有 gap 相关声明都无效 - 若需多行间也有垂直间距，必须显式加
flex-wrap: wrap；否则只有第一行内 item 之间有列间距，row-gap不触发 - 子项设了
flex-shrink: 0且内容过宽，容器被撑满，间隙被视觉“压扁”不可见 - 子项外层用了
display: contents，会让子项脱离渲染树，gap失去作用对象
移动端首尾留白和差异化间距怎么处理
gap 只控制子项之间，不管容器边缘。所谓“左右贴边、中间等距”的需求，不能靠 gap 解决：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 首尾留白必须用容器的
padding，例如padding: 0 16px控制左右内边距 - 设计稿要求“第一组卡片 24px、第二组缩到 8px”，
gap是容器级统一控制，无法按子项分组设置——必须拆成两个独立容器，各自声明row-gap/column-gap - 响应式断点中调整间距，优先直接改
row-gap值，别切回margin，否则逻辑割裂、维护成本飙升
图片塌陷和卡片高度不一致导致的闪跳
瀑布流或商品网格中，gap 生效的前提是卡片有稳定高度。图片未加载完时高度为 0，Grid/Flex 会按 0 高度布局，后续图片加载完成突然撑开，造成页面闪跳：
- 给卡片加
aspect-ratio: 9/16或aspect-ratio: 4/3，强制维持宽高比，防止塌陷 - 不依赖
grid-auto-rows，让行高由内容自然撑开；如需最小高度，加min-height: 200px到卡片本身 - 禁用
object-fit: cover时没配height，图片拉伸变形也会破坏间隙对齐，建议统一设height: 180px; object-fit: cover;
真正难的不是让 gap 显示出来，而是意识到它只在“布局上下文完整”时才起效——从 display 类型、换行控制、子项收缩行为，到图片占位策略，缺一环，视觉上就是“没间距”。
