弹窗容器需设为flex或grid才能用gap控制子项间距，且子元素必须是直接子项、无冗余包裹层；垂直布局用flex-direction:column+gap，按钮组单独用flex容器加gap更稳定；Safari 14.0需写row-gap/column-gap兼容。
弹窗容器本身不能直接用 gap 控制内部内容间距
gap 是作用于 flex 或 grid 容器的子项之间的间隙，不是用来调弹窗里标题、正文、按钮之间距离的。如果你给弹窗最外层 .modal 设了 display: flex 和 gap: 16px，但子元素没按 flex item 渲染（比如还套着 div 包裹层、或用了 display: contents），gap 就不会生效。
常见错误现象：gap: 16px 写了，但标题和按钮还是紧贴着；DevTools 里 computed 面板查不到 gap 值；或者只在部分浏览器显示正常。
- 确保弹窗内容区是直接子元素：比如
<div class="modal"> <h2>标题</h2> <p>正文</p> <button>确定</button> </div>，中间不要多一层无意义的div - 父容器必须设
display: flex且方向明确：flex-direction: column（垂直排列）或row（水平按钮组） - 若内容需换行（如按钮组过宽），加
flex-wrap: wrap，否则row-gap在单行时无效 - 别在弹窗上同时写
gap: 16px和row-gap: 8px——后者会覆盖行间距，列间距却仍为 16px，视觉失衡
弹窗内按钮组横向排列，用 gap 比 margin 更稳
弹窗底部多个按钮（如「取消」「确认」「更多」）横向排布时，用 gap 替代每个按钮单独设 margin-right，能避免最后一个按钮多出空白、响应式错位、外边距合并等问题。
立即学习“前端免费学习笔记（深入）”；
正确做法是把按钮组单独抽成一个 flex 容器：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
.modal-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
}
- 不用
margin-right: 8px+:last-child { margin-right: 0 }这种易漏、难维护的写法 - 如果按钮高度不一致，加
align-items: center对齐基线 - 小屏下按钮可能溢出？加
flex-wrap: wrap和justify-content: center自动居中换行 - 注意 Safari 14.0 及更早版本不支持
gap: 8px简写，必须拆成row-gap: 8px; column-gap: 8px;（虽然按钮组通常只用row-gap，但分开写更保险）
弹窗内容区垂直留白，别只靠 padding 或 margin
标题、正文、操作区之间需要呼吸感，但很多人习惯给每个元素加 margin-bottom，结果在不同设备上因外边距合并、字体缩放、行高变化导致间距忽大忽小。
更可控的方式是把内容区再包一层 flex 容器，统一用 gap：
.modal-body {
display: flex;
flex-direction: column;
gap: 12px;
}
- 子元素（
h2、p、ul等）自身不要设上下 margin，清空它：margin: 0; - 如果某段文字需要额外缩进或对齐，用
padding-left或text-indent，而非margin-left - gap 不参与盒模型计算，不会撑宽容器；而 margin 可能触发 BFC、影响宽度继承，尤其在
max-width弹窗中容易破布局 - 设计稿要求“标题距顶部 24px、正文距标题 16px、按钮距正文 20px”？gap 是统一值，这种差异化间距得拆成两个容器，比如
.modal-header+.modal-main，各自设不同gap
Safari 14.0 兼容问题最容易被忽略
真机测试时发现弹窗内容挤在一起，CSS 明明写了 gap: 16px，但 Safari iOS 14.4（对应 Safari 14.0）就是不认——这不是你代码写错了，是它压根不解析 gap 这个属性名。
DevTools 的 Computed 面板里根本看不到 gap 出现，也没有 warning，静默失效。
- 必须写成
row-gap: 16px; column-gap: 16px;，哪怕你只想要垂直间距 -
-webkit-gap在 Safari 14.0 中也无效，别浪费时间加前缀 - 别混用：
gap: 16px; row-gap: 8px;会导致行为不可控，尤其在旧 Safari 下可能全失效 - 如果项目还要支持 IE，
@supports (gap: 1rem)判断不了 Safari 14.0，得靠 JS UA 检测或服务端降级
真正难的不是写出能跑的 gap，而是当设计师说“这个弹窗在 iPad 上间距放大 1.5 倍”，你得意识到 gap 是长度值，可以配 rem 或 em 响应式缩放，但不能靠媒体查询硬切两套完全不同的 gap 值——那样维护成本会指数上升。
