结算页应优先用gap划分模块：flex或grid容器设gap控制直系子元素间距，避免margin塌陷；模块内标题与内容、按钮组、表单标签等场景须退回到padding或margin；兼容低版本需@supports兜底。
用 gap 划分结算页信息模块，别碰 margin
结算页最怕视觉割裂：收货地址、商品清单、优惠券、支付方式、总价几个区块之间靠 margin 硬推，结果一改字体大小或换设备，间距全乱；更糟的是，某些安卓 WebView 里 margin 会塌陷。直接上 gap 是最干净的解法——它只作用于容器内直系子元素，不污染全局，也不受外边距合并干扰。
前提是容器得是 flex 或 grid。结算页结构天然适合用 flex 垂直堆叠，比如把整个内容区设为 display: flex; flex-direction: column; gap: 16px;，所有模块自动等距分离。
-
gap值建议用设计系统里已定义的 spacing token，比如12px（小模块间距）、24px（大区块分隔），避免写死像素值 - 别在子模块内部再用
margin-top或margin-bottom，否则和gap叠加，间距翻倍 - 如果某个模块需要“顶头”显示（比如顶部导航栏不参与
gap），就把它从 flex 容器中抽出来，用position: sticky或独立包裹层处理
gap 在 grid 布局里怎么配商品清单 + 价格明细
结算页右侧的价格明细（商品小计、运费、优惠、实付）通常和左侧商品列表并排，这时用 grid 更稳：display: grid; grid-template-columns: 1fr 320px; gap: 24px;。注意两个关键点：
- 右侧固定宽度（如
320px）比用minmax()更可控，避免 iOS Safari 对fr单位的渲染抖动 -
gap同时控制列间距和行间距，所以商品列表内部若也用grid，记得给它单独设gap，别依赖父级 - 真机测试时发现 Android Chrome 下
gap在缩放 110% 时可能微偏，可加transform: translateZ(0)强制 GPU 加速
哪些地方 gap 不能用，必须退回到 padding
gap 看似万能，但结算页有三处它插不上手：
- 模块内部标题与内容之间：比如「收货地址」标题下接姓名、电话、详细地址，这属于单个模块内的垂直节奏，得用
padding-top或margin-bottom控制，gap对非直系子元素无效 - 按钮组（如「返回购物车」「去支付」）之间的间距：它们通常是
inline-flex或flex容器里的兄弟元素，但按钮本身带border-radius和box-shadow，用gap容易让阴影被截断，此时用margin-right更稳妥 - 输入框与标签之间：label + input 组合若用
flex布局，gap会同时拉开 label 和 input，但 label 可能需左对齐、input 需右对齐，这种不对称关系只能靠padding或text-align调整
兼容性兜底：iOS 14.5 以下和部分安卓低版本不支持 gap
虽然现在绝大多数真机都支持 gap，但外包项目或银行类 H5 常要求兼容 iOS 14.5 以下（如 iPad Air 2 还在跑 iOS 12）。这时候不能删 gap，而是双写：
section.checkout-main {
display: flex;
flex-direction: column;
gap: 16px;
}
@supports not (gap: 16px) {
section.checkout-main > * + * {
margin-top: 16px;
}
}
注意 @supports 里必须写完整属性+值，只写 gap 不生效；另外别用 !important 覆盖 gap，CSS 优先级会导致不可预测行为。
真正容易被忽略的，是 gap 和 scroll-margin-top 的冲突——当点击锚点跳转到某个结算模块时，如果该模块设置了 scroll-margin-top（比如为了避开吸顶导航栏），而父容器又用了 gap，iOS 上可能出现定位偏移。这种情况得手动在 JS 里补偿 gap 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
