解决页面区块间距不统一的关键是建立可复用的间距体系：定义–space-xs至–space-xl等css变量，按语义关系（相邻兄弟、容器子内容、功能分隔）合理使用margin/padding，禁用全局重置，辅以工具检测magic number。
页面区块间距不统一，本质是 margin 使用缺乏约束和标准。解决的关键不是“加多少像素”，而是建立可复用、易维护的间距体系。
用间距变量统一管理
避免在各处写 margin: 16px 或 margin-bottom: 24px 这类散落值。在 CSS 预处理器（如 sass）或现代 CSS（配合 :root 变量）中定义一套基础间距尺度：
- –space-xs: 4px
- –space-sm: 8px
- –space-md: 16px
- –space-lg: 24px
- –space-xl: 32px
然后模块间统一使用这些变量，例如：.section + .section { margin-top: var(--space-lg); }
按语义分组，而非视觉位置硬写
不要看到两个卡片之间空了 20px 就直接写 margin-bottom: 20px。应识别结构关系：
立即学习“前端免费学习笔记（深入）”；
- 同级内容区块（如多个
.card并列）→ 用相邻兄弟选择器统一控制间距 - 容器与子内容（如
.article和内部.title）→ 用内边距（padding）更合理，保持容器边界清晰 - 功能型分隔（如标题下划线、分割线）→ 单独用 border 或 hr，不依赖 margin 模拟
禁用通配符重置 margin/padding
像 * { margin: 0; padding: 0; } 这类全局重置会抹掉浏览器默认语义间距（如 h1、p、ul 的天然留白），反而迫使你在每个地方手动补 margin，加剧不一致。推荐使用 normalize.css 或轻量 reset，保留合理默认，再按需覆盖。
用工具辅助检查与收敛
开发时打开浏览器开发者工具，用“计算样式”面板筛选 margin 相关属性，快速定位异常值；上线前可用自动化工具（如 eslint-plugin-css-modules 配合自定义规则，或 postcss 插件）检测是否出现未声明的 magic number（如 margin: 13px、padding-bottom: 7px），强制走变量体系。