第 5 课

间距系统

创建一致的空间节奏

间距系统基于一个基准单位(通常是 4px 或 8px),所有间距都是这个单位的倍数。这创造了视觉上的节奏感和一致性。

核心要点
  • 基准单位 — 4px 提供更精细的控制,8px 更简洁
  • 间距阶梯 — 4, 8, 12, 16, 24, 32, 48, 64...
  • 用途区分 — 组件内部间距、组件之间间距、布局间距
  • 响应式 — 不同屏幕尺寸可能需要不同的间距比例
4px 基准网格
/* 4px Base Grid System */
--space-1:  4px;   /* Extra small */
--space-2:  8px;   /* Small */
--space-3:  12px;  /* Small-medium */
--space-4:  16px;  /* Standard */
--space-6:  24px;  /* Medium */
--space-8:  32px;  /* Large */
--space-12: 48px;  /* Extra large */
--space-16: 64px;  /* Section spacing */

在开发时使用浏览器的像素网格叠加层,确保所有元素都对齐到网格。