# Space

**Full documentation:** https://webawesome.com/docs/tokens/space

Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size.

You can use `--wa-space-scale` to increase or decrease all spacing at once. By default, this multiplier is `1`.

The calculations for each size and the resulting pixel value (assuming a 16px root font size) are listed below.

| Custom Property | Default Value | Preview - |
| --- | --- | --- |
| \`--wa-space-3xs\` | \`calc(var(--wa-space-scale) \* 0.125rem)\` (2px) | |
| \`--wa-space-2xs\` | \`calc(var(--wa-space-scale) \* 0.25rem)\` (4px) | |
| \`--wa-space-xs\` | \`calc(var(--wa-space-scale) \* 0.5rem)\` (8px) | |
| \`--wa-space-s\` | \`calc(var(--wa-space-scale) \* 0.75rem)\` (12px) | |
| \`--wa-space-m\` | \`calc(var(--wa-space-scale) \* 1rem)\` (16px) | |
| \`--wa-space-l\` | \`calc(var(--wa-space-scale) \* 1.5rem)\` (24px) | |
| \`--wa-space-xl\` | \`calc(var(--wa-space-scale) \* 2rem)\` (32px) | |
| \`--wa-space-2xl\` | \`calc(var(--wa-space-scale) \* 2.5rem)\` (40px) | |
| \`--wa-space-3xl\` | \`calc(var(--wa-space-scale) \* 3rem)\` (48px) | |
| \`--wa-space-4xl\` | \`calc(var(--wa-space-scale) \* 4rem)\` (64px) | |
| \`--wa-space-5xl\` | \`calc(var(--wa-space-scale) \* 5rem)\` (80px) | |