网站导航
设计令牌

间距

用同一套间距尺度设置 padding、margin、gap、inset 和偏移。

本页内容

类

类声明
p-<name>padding: var(--spacing-<name>);
m-<name>margin: var(--spacing-<name>);
gap-<name>gap: var(--spacing-<name>);
其他 60 个类
类声明
ix-<name>inset-inline: var(--spacing-<name>);
iy-<name>inset-block: var(--spacing-<name>);
mb-<name>margin-bottom: var(--spacing-<name>);
ml-<name>margin-left: var(--spacing-<name>);
mr-<name>margin-right: var(--spacing-<name>);
mt-<name>margin-top: var(--spacing-<name>);
mx-<name>margin-inline: var(--spacing-<name>);
my-<name>margin-block: var(--spacing-<name>);
pb-<name>padding-bottom: var(--spacing-<name>);
pl-<name>padding-left: var(--spacing-<name>);
pr-<name>padding-right: var(--spacing-<name>);
pt-<name>padding-top: var(--spacing-<name>);
px-<name>padding-inline: var(--spacing-<name>);
py-<name>padding-block: var(--spacing-<name>);
ixe-<name>inset-inline-end: var(--spacing-<name>);
ixs-<name>inset-inline-start: var(--spacing-<name>);
iye-<name>inset-block-end: var(--spacing-<name>);
iys-<name>inset-block-start: var(--spacing-<name>);
mxe-<name>margin-inline-end: var(--spacing-<name>);
mxs-<name>margin-inline-start: var(--spacing-<name>);
mye-<name>margin-block-end: var(--spacing-<name>);
mys-<name>margin-block-start: var(--spacing-<name>);
pxe-<name>padding-inline-end: var(--spacing-<name>);
pxs-<name>padding-inline-start: var(--spacing-<name>);
pye-<name>padding-block-end: var(--spacing-<name>);
pys-<name>padding-block-start: var(--spacing-<name>);
top-<name>top: var(--spacing-<name>);
left-<name>left: var(--spacing-<name>);
inset-<name>inset: var(--spacing-<name>);
right-<name>right: var(--spacing-<name>);
bottom-<name>bottom: var(--spacing-<name>);
col-gap-<name>column-gap: var(--spacing-<name>);
row-gap-<name>row-gap: var(--spacing-<name>);
scroll-m-<name>scroll-margin: var(--spacing-<name>);
scroll-p-<name>scroll-padding: var(--spacing-<name>);
scroll-mb-<name>scroll-margin-bottom: var(--spacing-<name>);
scroll-ml-<name>scroll-margin-left: var(--spacing-<name>);
scroll-mr-<name>scroll-margin-right: var(--spacing-<name>);
scroll-mt-<name>scroll-margin-top: var(--spacing-<name>);
scroll-mx-<name>scroll-margin-inline: var(--spacing-<name>);
scroll-my-<name>scroll-margin-block: var(--spacing-<name>);
scroll-pb-<name>scroll-padding-bottom: var(--spacing-<name>);
scroll-pl-<name>scroll-padding-left: var(--spacing-<name>);
scroll-pr-<name>scroll-padding-right: var(--spacing-<name>);
scroll-pt-<name>scroll-padding-top: var(--spacing-<name>);
scroll-px-<name>scroll-padding-inline: var(--spacing-<name>);
scroll-py-<name>scroll-padding-block: var(--spacing-<name>);
translate-<name>translate: var(--spacing-<name>);
scroll-mxe-<name>scroll-margin-inline-end: var(--spacing-<name>);
scroll-mxs-<name>scroll-margin-inline-start: var(--spacing-<name>);
scroll-mye-<name>scroll-margin-block-end: var(--spacing-<name>);
scroll-mys-<name>scroll-margin-block-start: var(--spacing-<name>);
scroll-pxe-<name>scroll-padding-inline-end: var(--spacing-<name>);
scroll-pxs-<name>scroll-padding-inline-start: var(--spacing-<name>);
scroll-pye-<name>scroll-padding-block-end: var(--spacing-<name>);
scroll-pys-<name>scroll-padding-block-start: var(--spacing-<name>);
shape-margin-<name>shape-margin: var(--spacing-<name>);
word-spacing-<name>word-spacing: var(--spacing-<name>);
border-spacing-<name>border-spacing: var(--spacing-<name>);
outline-offset-<name>outline-offset: var(--spacing-<name>);

族决定属性，令牌提供距离。px- 和 mx- 使用行内轴，pl- 和 ml- 则使用物理左侧。完整族表列出各自对应的原生属性。

值

预设尺度使用 rem 长度。像素换算假设根元素字号为 16px；浏览器使用实际的根元素字号。需要零或一个 CSS 像素时，可使用 p(0) 或 p(1) 这类直接值函数。

类值
p-4xs.125rem2px
p-3xs.25rem4px
p-2xs.375rem6px
p-xs.5rem8px
p-sm.75rem12px
p-md1rem16px
p-lg1.5rem24px
p-xl2rem32px
p-2xl3rem48px
p-3xl4rem64px
p-4xl6rem96px
p-5xl8rem128px

距离相同，作用的边界不同

p-md 和 gap-md 都读取 --spacing-md，但 padding 分隔内容与盒子边缘，gap 则分隔布局中的项目。gap 不会在外围产生 padding。

padding 包围内容，gap 分隔项目

两个标示的距离都是 1rem，以 16px 的根元素字号呈现。蓝色和紫色是检查用的叠加标注，p-md 与 gap-md 不会添加这些颜色。

文字说明
  1. 两个示例都使用 Grid，以及预设的 --spacing-md 值 1rem。内容行的文字排版与内部尺寸相同。
  2. 左侧示例使用 p-md，没有 gap。蓝色区域位于盒子边缘内侧，从四个方向包围内容。
  3. 右侧示例使用 gap-md，没有 padding。紫色区域只位于两行之间，外围没有对应的区域。
  4. 图中根元素字号为 16px，因此每个标示距离都是 16px。示例使用实际生成的 padding 与 gap，但标注颜色和虚线边界不是工具类的输出。

gap-md 只设置间隙值，不会启用 Grid 或 Flexbox。同样，inset 令牌只设置偏移量，不会选择定位方式。实际效果由原生属性和布局决定。

能否使用负值令牌形式取决于读取它的属性：-mt-md 合法，-p-md 则被拒绝。预设没有 zero 或 auto 间距令牌；零值可用 m(0)，行内轴自动外边距则可用 mx-auto 这类固定工具类。

另见 负值与直接值与原生 gap 行为.

用法

为表单添加内边距、拉开字段间距，并分隔每个标签与控件。

<form class="… grid gap-md p-md">  <label class="… grid gap-2xs">Name<input class="… px-sm py-xs" value="Aron" /></label>  <label class="… grid gap-2xs">Email<input type="email" class="… px-sm py-xs" value="aron@example.com" /></label></form>
生成的 CSS
@layer theme {  :root,  :host {    --spacing-2xs: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem;    --spacing-md: 1rem  }}@layer utilities {  .grid {    display: grid  }  .gap-2xs {    gap: var(--spacing-2xs)  }  .gap-md {    gap: var(--spacing-md)  }  .p-md {    padding: var(--spacing-md)  }  .py-xs {    padding-block: var(--spacing-xs)  }  .px-sm {    padding-inline: var(--spacing-sm)  }}

自定义

修改预设值或添加令牌：--spacing-card 会创建 p-card、m-card、gap-card 和其他间距类。

@theme {  --spacing-card: 1.25rem;}
生成的 CSS
@layer theme {  :root,  :host {    --spacing-card: 1.25rem  }}@layer utilities {  .p-card {    padding: var(--spacing-card)  }}

另见 主题指令与布局.