基础

Spacing scale 间距尺度

设计令牌 --pvs-space-* 是全站 margin/padding/gap 的 SSOT；具体类名见布局 · 间距。

尺度一览

方格内蓝色块边长 = 该尺度实际像素；常用步进 1–4、6、8、12、16、24。

--pvs-space-1 0.25rem · pvs-p/m-1

--pvs-space-2 0.5rem · pvs-p/m-2

--pvs-space-3 0.75rem · pvs-p/m-3

--pvs-space-4 1rem · pvs-p/m-4

--pvs-space-6 1.5rem · pvs-p/m-6

--pvs-space-8 2rem · pvs-p/m-8

--pvs-space-12 3rem · pvs-p/m-12

--pvs-space-16 4rem · pvs-p/m-16

--pvs-space-24 6rem · pvs-p/m-24

令牌表

类名	说明
`--pvs-space-1`	0.25rem（4px）
`--pvs-space-2`	0.5rem
`--pvs-space-4`	1rem
`--pvs-space-6`	1.5rem
`--pvs-space-8`	2rem
`--pvs-space-12`	3rem
`--pvs-gap`	默认 flex/grid 间隙（常 = space-6）
`--pvs-band-py`	章节壳上下留白

与布局类的关系

pvs-m-* / pvs-p-* / pvs-gap-* 均引用上表变量；改令牌即可全站换肤间距。

pvs-p-2

pvs-p-4

pvs-p-8

<div class="pvs-flex pvs-gap-4 pvs-items-end pvs-flex-wrap">
  <div class="pvs-p-2 pvs-border pvs-bg-surface">pvs-p-2</div>
  <div class="pvs-p-4 pvs-border pvs-bg-surface">pvs-p-4</div>
  <div class="pvs-p-8 pvs-border pvs-bg-surface">pvs-p-8</div>
</div>

stack / cluster 捷径

pvs-stack纵向 + gap

簇AB

<div class="pvs-grid" style="--pvs-grid-columns:2;--pvs-gap:1rem;max-width:24rem">
  <div class="pvs-stack pvs-p-3 pvs-border">
    <span class="pvs-p-2 pvs-bg-surface-muted">pvs-stack</span>
    <span class="pvs-p-2 pvs-bg-surface-muted">纵向 + gap</span>
  </div>
  <div class="pvs-cluster pvs-p-3 pvs-border">
    <span class="pvs-p-1 pvs-border">簇</span>
    <span class="pvs-p-1 pvs-border">A</span>
    <span class="pvs-p-1 pvs-border">B</span>
  </div>
</div>

类名速查

类	样式
`--pvs-space-0` … `24`	令牌尺度
`pvs-m-` `pvs-p-`	布局 utility → 布局 · 间距
`pvs-gap-*`	→ 布局 · 间隙
`pvs-stack` / `pvs-cluster`	纵向堆叠 / 横向簇