解决页面区块间距不统一的关键是建立可复用的间距体系：定义--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），强制走变量体系。