CSS变量统一管理间距最直接有效，通过:root定义4px基数的语义化间距变量（如--space-xs至--space-xl），组件中用var()引用，配合简短工具类和calc()组合，确保全局一致、灵活可维护。
用 CSS 变量（Custom Properties）统一管理间距，是解决模块间距混乱最直接有效的方式。它让所有外边距、内边距的数值有唯一来源，改一处，全局响应，避免硬编码导致的不一致。
定义一套基础间距刻度
在 :root 中声明语义化且可扩展的间距变量，比如：
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
}
这些值不是随意定的，而是基于 4px 基数倍增，便于视觉对齐和快速估算。你也可以按项目需要调整为 6px 或 8px 基数。
在组件中统一使用变量替代具体数值
不再写 margin-bottom: 16px 或 padding: 8px 12px，而是引用变量：
立即学习“前端免费学习笔记（深入）”；
.card { margin-bottom: var(--space-lg); }.btn-group { gap: var(--space-sm); }.form-item { margin: var(--space-md) 0; }.modal-content { padding: var(--space-xl); }
这样每个模块的间距都来自同一套规则，视觉节奏自然统一。
配合 class 工具类快速复用（可选但推荐）
为高频间距场景补充工具类，提升开发效率：
.mt-md { margin-top: var(--space-md); }.pb-lg { padding-bottom: var(--space-lg); }.gap-sm { gap: var(--space-sm); }
工具类名保持简短、语义清晰，命名风格统一（如 mt/pb/gap + 尺寸缩写），避免过度泛滥，控制在 10 个以内核心类即可。
用 calc() 做灵活组合，不破坏系统性
遇到需要叠加或微调的情况，依然用变量运算，不引入新数值：
.section-header { margin-bottom: calc(var(--space-lg) + var(--space-sm)); }.sidebar { margin-left: calc(-1 * var(--space-md)); }
这样既保持灵活性，又确保所有间距仍锚定在你的设计系统中，不会“脱轨”。
