设计是元素之间的关系

平面设计的老话：设计不只是元素长什么样，更是它们之间留了多少空白。

间距和留白定义了信息的组织形式。一个段落和下一个段落之间的空白，比它们各自的文字更能暗示"这是一个完整的思想单元"。

24 级间距标度

幻梦定义了一组间距变量，从 4px 到 96px：

$s1:  0.25rem;  // 4px   微调间距
$s2:  0.5rem;   // 8px   紧密相关元素
$s3:  0.75rem;  // 12px  卡片内边距(小)
$s4:  1rem;     // 16px  标准间距
$s5:  1.25rem;  // 20px  段落间距
$s6:  1.5rem;   // 24px  卡片内边距(标准)
$s8:  2rem;     // 32px  区块间距
$s10: 2.5rem;   // 40px  大区块间距
$s12: 3rem;     // 48px  章节间距
$s16: 4rem;     // 64px  页面区域间距
$s20: 5rem;     // 80px  首页 Hero 间距
$s24: 6rem;     // 96px  页面顶部/底部留白

递增采用 4px 基础单位，配合 rem 实现与字体大小的比例缩放。

间距的三条规则

1. 亲密性

相关的元素靠得更近。文章标题和正文之间的间距应该小于两个不同文章之间的间距。

.article-header h1 { margin-bottom: var(--s2); }  /* 标题与元信息 8px */
.article-header .meta { margin-bottom: var(--s5); } /* 元信息与正文 20px */

2. 一致性

同一层级的间距在整个页面中保持一致。所有卡片的内部 padding 都是 var(--s6) (24px)。所有主要区块之间的间距都是 var(--s8) (32px)。

3. 呼吸

大留白创造高级感。首页 Hero 的标题和描述之间的留白比文章内部的留白更大——奢侈的空白传递"这里重要"的信号。

移动端的留白

@media (max-width: 575px) {
  :root {
    --section-spacing: var(--s8);    /* 移动端缩小间距 */
  }
}

@media (min-width: 768px) {
  :root {
    --section-spacing: var(--s12);   /* 桌面端扩大间距 */
  }
}

移动端屏幕空间宝贵，留白缩小；桌面端空间充裕，留白扩大。

留白不只是 empty space

好的留白让内容被看见。没有留白，所有信息争夺注意力，最终什么也看不见。

幻梦的设计中有意识地使用大量留白——标签云中标签之间的间距、侧边栏部件之间的间隔、文章段落之间的空白。这些空白的总和决定了页面的"呼吸感"。

有一种设计叫"拥挤的设计"——把所有元素挤在一起，害怕浪费任何像素。好的设计不怕空白。