間距

類別

家族決定屬性，token 提供距離。px- 與 mx- 使用行內軸，pl- 與 ml- 則使用實體左側。完整家族表會列出各自對應的原生屬性。

值

預設尺度使用 rem 長度。像素換算假設根元素字型大小為 16px；瀏覽器會使用實際的根元素字型大小。需要零或一個 CSS 像素時，可使用 p(0) 或 p(1) 這類直接值函式。

距離相同，作用的邊界不同

p-md 與 gap-md 都讀取 --spacing-md，但 padding 將內容與盒模型邊緣隔開，gap 則將版面中的項目隔開。gap 不會在外圍產生 padding。

兩個標示的距離都是 1rem，以 16px 的根元素字型大小呈現。藍色與紫色是檢查用的疊加標註，p-md 與 gap-md 不會加入這些色彩。

文字說明

1. 兩個範例都使用 Grid，以及預設的 --spacing-md 值 1rem。內容列的文字排版與內部尺寸相同。
2. 左側範例使用 p-md，沒有 gap。藍色區帶位於盒子邊緣內側，從四個方向圍住內容。
3. 右側範例使用 gap-md，沒有 padding。紫色區帶只位於兩列之間，外圍沒有對應的區帶。
4. 圖中根元素字型大小為 16px，因此每個標示距離都是 16px。範例使用真正生成的 padding 與 gap，但標註色彩與虛線邊界不是 utility 的輸出。

gap-md 只會設定間隙值，不會啟用 Grid 或 Flexbox。同樣地，inset token 只會設定偏移量，不會選擇定位方式。實際效果由原生屬性與版面配置決定。

能否使用負值 token 形式，取決於讀取它的屬性：-mt-md 合法，-p-md 則會被拒絕。預設集沒有 zero 或 auto 間距 token；零值可用 m(0)，行內軸自動外距則可用 mx-auto 這類固定 utility。

另見 負值與直接值與原生 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>

@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)  }}

自訂

修改預設值或新增 token：--spacing-card 會建立 p-card、m-card、gap-card 和其他間距 class。

@theme {  --spacing-card: 1.25rem;}

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

另見 主題指令與版面配置.