---
title: "间距与度量令牌"
description: "间距阶梯、最小目标、图标尺寸、边框宽度和焦点环的各项尺寸。"
url: "https://tanrei.chnotchy.com/zh-cn/tokens/space/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 间距与度量令牌

> 间距阶梯、最小目标、图标尺寸、边框宽度和焦点环的各项尺寸。

`tanrei.sys` 下的尺寸令牌。使用指引请阅读[布局](https://tanrei.chnotchy.com/zh-cn/foundations/layout/)和[无障碍](https://tanrei.chnotchy.com/zh-cn/foundations/accessibility/)。

## 间距

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-space-space0` | 0px |  |
| `--tanrei-sys-space-space25` | 2px |  |
| `--tanrei-sys-space-space50` | 4px |  |
| `--tanrei-sys-space-space75` | 6px |  |
| `--tanrei-sys-space-space100` | 8px |  |
| `--tanrei-sys-space-space125` | 10px |  |
| `--tanrei-sys-space-space150` | 12px |  |
| `--tanrei-sys-space-space175` | 14px |  |
| `--tanrei-sys-space-space200` | 16px |  |
| `--tanrei-sys-space-space250` | 20px |  |
| `--tanrei-sys-space-space300` | 24px |  |
| `--tanrei-sys-space-space400` | 32px |  |
| `--tanrei-sys-space-space450` | 36px |  |
| `--tanrei-sys-space-space500` | 40px |  |
| `--tanrei-sys-space-space600` | 48px |  |
| `--tanrei-sys-space-space700` | 56px |  |
| `--tanrei-sys-space-space800` | 64px |  |
| `--tanrei-sys-space-space900` | 72px |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/space.tokens.json`

## 最小目标

The least sizes of what a person presses. minimum is the least height (and, for an icon-only control, width) anything pressable is drawn at; touch and pointer are the least hit areas, which a control reaches past what it draws where it stands alone.

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-target-minimum` | 32px |  |
| `--tanrei-sys-target-pointer` | 44px |  |
| `--tanrei-sys-target-spacing` | 8px |  |
| `--tanrei-sys-target-touch` | 48px |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## 图标

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-icon-extra-small` | 16px |  |
| `--tanrei-sys-icon-large` | 32px |  |
| `--tanrei-sys-icon-medium` | 24px |  |
| `--tanrei-sys-icon-small` | 20px |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## 边框

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-border-hairline` | 1px |  |
| `--tanrei-sys-border-thick` | 2px |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## 焦点环

The focus indicator, from the control outwards: \`offset\` (negative = drawn inside the control), then an optional inner stroke in sys.color.focus-ring-inner, then the outer stroke in sys.color.focus-ring. Never animated.

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-focus-inner-width` | 0px |  |
| `--tanrei-sys-focus-offset` | 2px |  |
| `--tanrei-sys-focus-outer-width` | 2px |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`