因为 gap 作用于网格或弹性容器子项间，不触发外边距合并且不撑开父容器，可避免骨架屏切换真实内容时的布局抖动；margin 则易因行高差异或 SSR hydration 不一致加剧抖动。
为什么 skeleton-card 里用 gap 而不是 margin
因为 gap 作用于网格或弹性容器的子项之间，不会触发外边距合并（margin collapse），也不会因子元素 margin-top 撑开父容器——而骨架屏必须严格控制高度和布局流，否则加载完成切换真实内容时会抖动。用 margin 容易在 .skeleton-content 内部行高不一致、或 SSR 渲染时 hydration 阶段 DOM 差异放大抖动。
grid-gap / gap 在骨架屏中的实际取值建议
响应式骨架屏中，gap 值需与最终真实内容的间距保持一致，否则 layout shift 无法避免：
-
gap: 16px是最常用起点，适配移动端到桌面端多数卡片/列表场景 - 小屏（≤768px）下若改用单列布局，
gap可维持不变，但需配合padding缩减整体留白，防止空白过多 - 不要用
gap: 1rem这类相对单位——SSR 直出 HTML 时rem依赖根字体大小，若 JS 尚未执行、html元素font-size未设，会导致骨架高度塌陷 - 若骨架结构嵌套在
display: grid的.grid-container中，直接写gap: 16px即可，无需额外包裹div模拟间距
spacing 属性在 Kivy 或其他 UI 框架中不能直接套用到 HTML 骨架屏
看到 Kivy 的 spacing 参数（如 spacing=[15, 30]）容易误以为 HTML 的 gap 也能拆成水平/垂直独立控制——但 HTML 的 gap 支持双值语法：gap: 12px 24px 表示水平 12px、垂直 24px，这点完全可用，只是多数骨架屏为保持视觉节奏统一，倾向使用单值。
真正要注意的是：Kivy 的 spacing 仅影响子控件之间，不包含 padding；而 HTML 中 gap 和 padding 必须分开设置——骨架容器自身需要 padding 来预留边缘呼吸感，否则首尾卡片紧贴视口边界，加载后真实内容带 padding 就会跳。
立即学习“前端免费学习笔记（深入）”；
服务端直出骨架时，gap 值必须硬编码进 HTML 样式或内联 style
很多团队把骨架屏样式抽成 CSS 文件异步加载，结果 SSR 输出的骨架 HTML 没有对应 class 或规则，初始渲染为空白或错位——这是首屏防抖动失败的常见原因。
正确做法是：
- 骨架容器（如
.skeleton-card）的gap必须由内联style="gap: 16px"或服务端注入的<style></style>块保障首屏立即生效 - 避免依赖外部 CSS 文件中的类名，尤其当骨架结构需在 JS 加载前就参与布局流
- 若用 CSS-in-JS（如 Emotion），确保骨架组件的样式在服务端渲染阶段已提取并注入
gap 值本身不复杂，但它的生效时机和作用域一旦脱离服务端直出上下文，就立刻从布局工具变成抖动源头。
