布局

Spacing 间距

margin / padding 尺度 0–24；令牌见基础 · 间距尺度。

全向 padding

同一元素对比 pvs-p-2 / pvs-p-6 / pvs-p-12，边距随尺度增大。

pvs-p-2

pvs-p-6

pvs-p-12

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap pvs-items-stretch">
  <div class="pvs-border pvs-bg-surface">
    <div class="pvs-p-2 pvs-bg-primary" style="color:#fff">pvs-p-2</div>
  </div>
  <div class="pvs-border pvs-bg-surface">
    <div class="pvs-p-6 pvs-bg-primary" style="color:#fff">pvs-p-6</div>
  </div>
  <div class="pvs-border pvs-bg-surface">
    <div class="pvs-p-12 pvs-bg-primary" style="color:#fff">pvs-p-12</div>
  </div>
</div>

单向与轴向

px-8 py-2

pt-6 pb-2 pl-4

mx-4 my-2

<div class="pvs-stack pvs-gap-3" style="max-width:16rem">
  <div class="pvs-px-8 pvs-py-2 pvs-border pvs-bg-surface-muted">
    <code>px-8 py-2</code>
  </div>
  <div class="pvs-pt-6 pvs-pb-2 pvs-pl-4 pvs-border">
    <code>pt-6 pb-2 pl-4</code>
  </div>
  <div class="pvs-mx-4 pvs-my-2 pvs-p-2 pvs-border pvs-bg-surface-muted">
    <code>mx-4 my-2</code>
  </div>
</div>

外边距与排版

pvs-mb-4 段落下间距

pvs-ml-8 缩进

<div class="pvs-border pvs-p-4">
  <p class="pvs-m-0 pvs-mb-4 pvs-p-2 pvs-bg-surface-muted">pvs-mb-4 段落下间距</p>
  <p class="pvs-m-0 pvs-ml-8 pvs-p-2 pvs-border">pvs-ml-8 缩进</p>
</div>

stack 纵向堆叠

pvs-stack = flex-col + 默认 --pvs-gap。

块 A

块 B

块 C

<div class="pvs-stack pvs-p-4 pvs-border" style="max-width:14rem">
  <div class="pvs-p-3 pvs-border pvs-bg-surface-muted">块 A</div>
  <div class="pvs-p-3 pvs-border pvs-bg-surface-muted">块 B</div>
  <div class="pvs-p-3 pvs-border pvs-bg-surface-muted">块 C</div>
</div>

cluster 横向簇

标签 B C 换行

<div class="pvs-cluster pvs-p-4 pvs-border" style="max-width:18rem">
  <span class="pvs-badge pvs-badge--primary">标签</span>
  <span class="pvs-badge">B</span>
  <span class="pvs-badge">C</span>
  <span class="pvs-badge">换行</span>
</div>

零与紧凑

pvs-p-0

pvs-p-1

pvs-p-3

<div class="pvs-flex pvs-gap-2 pvs-items-center">
  <div class="pvs-p-0 pvs-border">pvs-p-0</div>
  <div class="pvs-p-1 pvs-border pvs-bg-surface-muted">pvs-p-1</div>
  <div class="pvs-p-3 pvs-border">pvs-p-3</div>
</div>

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

padding 随断点增大

<div class="pvs-p-2 md:pvs-p-6 lg:pvs-px-12 lg:pvs-py-8 pvs-border pvs-bg-surface-muted">padding 随断点增大</div>

类名速查

类	样式
`pvs-m-` `pvs-p-`	全向 0–24
`pvs-mt/mr/mb/ml/mx/my-*`	单向 margin
`pvs-pt/pr/pb/pl/px/py-*`	单向 padding
`pvs-stack`	纵向 flex + gap
`pvs-cluster`	横向换行簇
`md:pvs-p-8`	响应式间距