间距系统与尺寸规则

先理解这个概念

间距系统把随意的数值收敛成可讨论的规则。4 或 8 的倍数常用作起点，但字体基线、边框和光学校正可能需要例外。语义间距如字段间距、区块间距比到处使用 space-4 更便于理解。

间距系统将零散的像素决定转成少量可重复关系。基础刻度有助于维护，但“必须都是某个数字的倍数”并不是设计目标。真正重要的是同类关系使用同类间距，例外有理由，并能在紧凑模式、窄屏和不同组件里解释清楚。

记住这三个原则

1. 01

   区分组件内部间距与组件之间间距。

2. 02

   优先复用少数间距等级，允许有理由的例外。

3. 03

   用 min-height 和 padding 适应文本变化，少写固定高度。

实际设计时，分三步做

1. STEP 01

   从现有页面提取高频关系：图标与文字、标签与字段、卡片内边距、章节间距。按用途归并，而不是先列很多数字。

2. STEP 02

   给这些关系映射少量刻度，明确组件内部间距与页面布局间距分别由谁负责，避免重复叠加。

3. STEP 03

   将两个组件并排和嵌套使用，检查外边距是否翻倍；再试紧凑模式，确认压缩的是合适层级。

一个容易理解的例子

规律的节奏让结构更清晰，也减少维护成本。

适用边界与取舍

光学调整、边框补偿和平台控件可能需要例外。应记录为何例外，而不是为了符合刻度破坏视觉对齐或交互尺寸。