---
title: スペース
description: "余白などに使用するトークンのリスト。"
---

## 使い方

```tsx
<Box m="md" />
```

```tsx
<Box p="md" />
```

```tsx
<Flex mx="md" />
```

## トークン

| Token | Value        |
| ----- | ------------ |
| `1`   | `"0.25rem"`  |
| `2`   | `"0.5rem"`   |
| `3`   | `"0.75rem"`  |
| `4`   | `"1rem"`     |
| `5`   | `"1.25rem"`  |
| `6`   | `"1.5rem"`   |
| `7`   | `"1.75rem"`  |
| `8`   | `"2rem"`     |
| `9`   | `"2.25rem"`  |
| `10`  | `"2.5rem"`   |
| `11`  | `"2.75rem"`  |
| `12`  | `"3rem"`     |
| `13`  | `"3.25rem"`  |
| `14`  | `"3.5rem"`   |
| `15`  | `"3.75rem"`  |
| `16`  | `"4rem"`     |
| `20`  | `"5rem"`     |
| `24`  | `"6rem"`     |
| `28`  | `"7rem"`     |
| `32`  | `"8rem"`     |
| `36`  | `"9rem"`     |
| `40`  | `"10rem"`    |
| `44`  | `"11rem"`    |
| `48`  | `"12rem"`    |
| `52`  | `"13rem"`    |
| `56`  | `"14rem"`    |
| `60`  | `"15rem"`    |
| `64`  | `"16rem"`    |
| `68`  | `"17rem"`    |
| `72`  | `"18rem"`    |
| `76`  | `"19rem"`    |
| `80`  | `"20rem"`    |
| `84`  | `"21rem"`    |
| `88`  | `"22rem"`    |
| `92`  | `"23rem"`    |
| `96`  | `"24rem"`    |
| `0.5` | `"0.125rem"` |
| `1.5` | `"0.375rem"` |
| `2.5` | `"0.625rem"` |
| `3.5` | `"0.875rem"` |
| `4.5` | `"1.125rem"` |
| `5.5` | `"1.375rem"` |
| `6.5` | `"1.625rem"` |
| `7.5` | `"1.875rem"` |
| `px`  | `"1px"`      |

## セマンティックトークン

| Token | Value  |
| ----- | ------ |
| `xs`  | `"1"`  |
| `sm`  | `"2"`  |
| `md`  | `"4"`  |
| `lg`  | `"6"`  |
| `xl`  | `"8"`  |
| `2xl` | `"12"` |
| `3xl` | `"16"` |
| `4xl` | `"24"` |
| `5xl` | `"32"` |