---
title: 间距与基线 Spacing
url: https://ui.zhaozimin.com/foundations/spacing/
markdown: https://ui.zhaozimin.com/foundations/spacing.md
group: 基础
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/SPACING.md  # https://ui.zhaozimin.com/src/system/styles/v4/SPACING.md
  - src/system/styles/v4/tokens.css  # https://ui.zhaozimin.com/src/system/styles/v4/tokens.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 间距与基线 Spacing

> 一把 8pt 梯子加 4pt 微调。padding、margin、gap、定位偏移、组件高度、行高全部从梯上取值——不发明数字。

## 间距梯

| 档位 | 语义 |
|---|---|
| 4 | 微调 |
| 8 | 元素内 |
| 12 | 紧凑 |
| 16 | 标准 |
| 20 | 舒适 |
| 24 | 区块内 |
| 32 | 区块间 |
| 40 | 大区块 |
| 48 | 节内距 |
| 56–88 | 节与节 |

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-s-1` | `4px` | 微调 |
| `--zzm-s-2` | `8px` | 元素内 |
| `--zzm-s-3` | `12px` | 紧凑 |
| `--zzm-s-4` | `16px` | 标准 |
| `--zzm-s-5` | `20px` | 舒适 |
| `--zzm-s-6` | `24px` | 区块内 |
| `--zzm-s-8` | `32px` | 区块间 |
| `--zzm-s-10` | `40px` | 大区块 |
| `--zzm-s-12` | `48px` | 节内距 |
| `--zzm-s-16` | `64px` | 节间距 |

JSX 内联样式允许写字面量，但值必须在梯上。拿不准取哪档，就看同类组件用了哪档，跟它一致。

## 控件高度三档

**28** 工具条键 · **36** 表单键与输入框 · **44** 主操作键。容器与头部导航取 32 / 40 / 48 / 56 / 64（60 是头部导航的历史值，允许）。可点击目标不小于 28px 高。

## 4pt 基线

- 显式行高一律写 **px 且为 4 的倍数**：13px 正文 → 20px；12.5px 副文 → 20px；16px 卡片标题 → 24px；22–26px 节标题 → 32px；40–48px 首屏 → 48 / 56px。
- 无单位行高只允许 `1`（单行字形复位，盒高由容器管）。
- 段落间距从梯上取：正文段间 8 / 12，区块间 16 / 24。

## 例外（审计器放行）

- `0`、边框宽 `1 / 1.5 / 2px`（细线不是间距）、`999 / 50%` 圆角、百分比、`calc()`、`var()`、`auto`。
- SVG 内部坐标、`transform`、动画关键帧数值——图形语言，不归网格管。
- 宽度暂不强制（侧栏 266 等历史值牵连布局公式）；新代码的固定宽度请自觉取梯。

## 执法器

纪律：自己改过的文件不新增偏离：

```bash
npm run audit:spacing          # 报告态
npm run audit:spacing -- --strict   # 有偏离即失败
```

## 铁律

- ✓ 要：需要尺寸时从梯上取一档
- ✗ 不要：写 13px、22px 这类不在梯上的间距
- ✓ 要：优先 8 的倍数，4 只做微调
- ✗ 不要：为「看起来差一点」发明新值——一致性比精确性重要

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* controls.css */

.zzm-v4 .zzm-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;                                   /* 圆角矩形——按钮禁胶囊 */
  border: 1px solid rgba(0, 0, 0, .14);
  color: #3F3F3B;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2EF 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .55),                 /* ④ 反光光晕环 */
    0 1px 2px rgba(0, 0, 0, .09),                       /* ③ 近影 */
    0 2px 6px rgba(0, 0, 0, .06),                       /* ③ 远影 */
    inset 0 1px 0 rgba(255, 255, 255, .92),             /* ② 顶部反光 */
    inset 0 -1px 0 rgba(0, 0, 0, .05);                  /* ① 底缘收沉 */
  transition: box-shadow .16s ease, transform .16s ease, background .16s ease,
    border-color .16s ease, filter .16s ease, opacity .16s ease;
}

.zzm-v4 .zzm-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .8),
    0 2px 4px rgba(0, 0, 0, .10),
    0 4px 12px rgba(0, 0, 0, .09),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(0, 0, 0, .05);
}

.zzm-v4 .zzm-btn:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #ECECE9 0%, #F4F4F1 100%);   /* ⑤ 凹面翻转 */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .45),
    0 1px 0 rgba(255, 255, 255, .65),
    inset 0 2px 4px rgba(0, 0, 0, .13),
    inset 0 1px 2px rgba(0, 0, 0, .09);
}

.zzm-v4 .zzm-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(166, 64, 47, .20),                   /* 键盘焦点＝朱色光晕 */
    0 1px 2px rgba(0, 0, 0, .09),
    0 2px 6px rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

.zzm-v4 .zzm-btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.zzm-v4 .zzm-btn:disabled:not(.zzm-btn--busy) {
  color: #A2A29C;
  background: #F2F2EF;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .04);
}

.zzm-v4 .zzm-btn--sm { height: 28px; padding: 0 12px; font-size: 12px; gap: 4px; }

.zzm-v4 .zzm-btn--lg { height: 44px; padding: 0 24px; font-size: 14px; border-radius: 12px; gap: 8px; }

.zzm-v4 .zzm-btn--icon.zzm-btn--sm { width: 28px; }

.zzm-v4 .zzm-btn--icon.zzm-btn--lg { width: 44px; }
```

---

上一页：[字体与字阶](https://ui.zhaozimin.com/foundations/typography.md) · 下一页：[圆角与细线](https://ui.zhaozimin.com/foundations/radius.md) · 全站目录：https://ui.zhaozimin.com/llms.txt