排版与间距：看，不要猜
字距、行距、段距、呼吸感、对齐、8px 体系——全部用真实排版当场对比。质感 90% 来自间距，不是眼力。
LETTER-SPACING
同一标题「高级感」· 字距三档
标题可略收紧（-2%～-5%），但过紧会糊成一团；过松则散、廉价。中间档：letter-spacing: -0.02em。
过紧 · -0.08em
高级感
字粘在一起 · 难读
合适 · -0.02em
高级感
词组成形 · 紧凑有力
过松 · +0.18em
高级感
字距散 · 像促销横幅
LINE-HEIGHT
同一段正文 · 行距决定气质
正文推荐 1.5–1.8×。1.1 像说明书；2.2 像诗歌排版——场景不同，气质完全不同。
1.1 × 挤
设计没质感，九成是间距没控好。字距、行距、段距要逐级递增，不能凭感觉调成一样大。转灰度看层次，黑白也有质感。
line-height: 1.11.65 × 正文标准
设计没质感，九成是间距没控好。字距、行距、段距要逐级递增，不能凭感觉调成一样大。转灰度看层次，黑白也有质感。
line-height: 1.652.2 × 疏松
设计没质感，九成是间距没控好。字距、行距、段距要逐级递增，不能凭感觉调成一样大。转灰度看层次，黑白也有质感。
line-height: 2.2 · 编辑感PARAGRAPH GAP
段距 = 行距 vs 段距 = 行距 × 2.5
段间距应明显大于行间距，才能建立段落层级。左：段距仅等于行距（1.65em）；右：段距 = 行距 × 2.5（4.125em）。
段距 = 行距 · 糊成一块
第一段：呼吸感不是留出来的，是设计出来的。边距、字距、行距、段距、元素间距——每一处都在说话。
第二段：精致感来自对齐系统与数值体系。8px 起步，按倍数递增，而不是凭感觉拖间距。
段距 = 行距 × 2.5 · 层次清
第一段：呼吸感不是留出来的，是设计出来的。边距、字距、行距、段距、元素间距——每一处都在说话。
第二段：精致感来自对齐系统与数值体系。8px 起步，按倍数递增，而不是凭感觉拖间距。
BREATHING ROOM
同一张海报卡片 · 挤满版 vs 留白版
信息密度、内边距、元素间距——三处同时收紧就会「喘不上气」。右边只改间距，不改内容。
挤满版 · 信息密度过高
限时特惠
春季新品发布
全场满减 · 买一送一 · 扫码领券 · 会员专享
⚡ 仅剩 3 小时！！
立即抢购
留白版 · 呼吸感足
NEW
春季新品发布
简约系列，限量发售
了解详情
ALIGNMENT
故意错位 vs 左缘对齐
左：圆点大小不一、条目左右偏移——肉眼觉得「不齐」但说不清。右：统一左缘 + 对齐参考线。
错位列表 · 精致感崩塌
- 字距太紧，标题糊成一团
- 行距太小，正文像说明书
- 段距等于行距，段落不分层
- 元素没对齐网格，细节露底
左缘对齐 · 1px 精致感
- 字距太紧，标题糊成一团
- 行距太小，正文像说明书
- 段距等于行距，段落不分层
- 元素没对齐网格，细节露底
8PX GRID
8px 间距系统 · 色条与模块标注
所有间距从 8 的倍数起步：8 / 16 / 24 / 32。斜纹区域 = 间距，实色块 = 内容模块。
8px
16px
24px
32px
标题区
正文区
操作区
页脚
模块间距：16 → 24 → 32，逐级拉开层级。不要所有间距都用同一个数。