最稳的是rem，它只锚定根字体且能被用户缩放策略统一影响；但需配合响应式html font-size（如clamp）避免小屏下间隙过大。
gap 值该用 px 还是 rem/em？
用 px 容易在高 DPR 屏（如 Retina、Surface Pro）上显得过疏，尤其当字体缩放或系统字号调大时；用 em 会随父级 font-size 波动，导致侧边栏 gap 和卡片 gap 不一致。最稳的是 rem，它只锚定根字体，且能被用户缩放策略统一影响。
但注意：gap: 1.5rem 在小屏（gap: 1rem；大屏（≥1440px）可升到 gap: 1.75rem，避免内容太挤。
-
gap不支持百分比值，写gap: 5%会直接失效 - 旧版 Safari（≤15.4）不支持
gap在 flex 容器中生效，必须用grid才可靠 - 如果已用
padding或margin模拟间距，删掉它们再上gap，否则会叠加出意外交错
gap 在 Grid 和 Flex 中行为差异
gap 在 display: grid 中是原生属性，所有现代浏览器都支持；但在 display: flex 中，Safari 14.1+、Chrome 84+ 才完整支持，Android WebView（Chromium ≤75）仍可能忽略。
更关键的是语义区别：gap 在 Grid 中只作用于轨道之间，不影响子项自身 margin；而在 Flex 中，它等效于给每个相邻项目加 margin，但不会触发 margin collapse——这点常被误认为“和 margin 一样”，其实不是。
- Grid 中改
gap不会影响grid-template-areas的区域对齐逻辑 - Flex 中若用了
flex-wrap: wrap，gap只作用于同一行/列内相邻项，跨行无垂直 gap（需额外设row-gap） - 别在同一个容器里既设
gap又设margin给子项，调试时容易误判占位
响应式中 gap 怎么随断点动态调整？
不能只靠 min-width 断点，因为 iPad Pro 12.9" 横屏逻辑宽度是 1536px，但 DPR=2，实际像素密度翻倍；单纯 @media (min-width: 1440px) 会让它和普通 1440px 屏用同样 gap，视觉上反而更稀疏。
稳妥做法是组合判断：
-
@media (min-width: 1440px) and (orientation: landscape)—— 排除竖屏平板干扰 -
@media (min-width: 1440px) and (-webkit-min-device-pixel-ratio: 2)—— 对 HiDPI 屏启用更小的gap（比如从1.5rem改为1.375rem） - 避免嵌套多层媒体查询，
gap变化超过两档（如 1rem → 1.5rem → 1.75rem）就该考虑是否真需要，人眼对间距变化并不敏感
gap 和布局塌陷、滚动条冲突怎么解？
最常见的问题是：加了 gap: 1.5rem 后，容器突然出现横向滚动条，或内容被截断。这不是 bug，是 gap 被算进容器总宽，而你又没控制 max-width 或用了 box-sizing: border-box 以外的模型。
核心检查点：
- 确认父容器没设
overflow: hidden却又没留足空间容纳gap - 如果子项用了
width: 100%，它只占“轨道净宽”，gap是额外加的，此时总宽 = 子项宽 × 列数 +gap× (列数 − 1)，容易超 - 调试时临时加
outline: 1px solid red看真实轨道边界，比靠眼睛估更准 - Grid 中想让最后一行也对齐，别依赖
justify-content: space-between，改用justify-items: stretch+gap
inherit 传递，每次都要显式声明。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
