---
system: radix
category: design-systems
topic: spacing
content_type: guidance
status: latest
version_label: "Radix Themes 3.x"
retrieved: 2026-05-13
source_url: https://www.radix-ui.com/themes/docs/theme/spacing
tags: [spacing, tokens, css-variables, layout, radix]
---

# Spacing

**Source:** `radix-ui.com/themes/docs/theme/spacing`

Radix Themes uses a 9-step spacing scale on a 4px base grid. Every step maps to a CSS custom property available as `var(--space-N)`. Scale values are consumed via layout component props (`m`, `p`, `gap`) rather than utility classes — no Tailwind-style className strings.

---

## Spacing scale

| Step | Value |
|---|---|
| 1 | 4px |
| 2 | 8px |
| 3 | 12px |
| 4 | 16px |
| 5 | 24px |
| 6 | 32px |
| 7 | 40px |
| 8 | 48px |
| 9 | 64px |

---

## CSS variable tokens

All nine steps are available as CSS custom properties for use in custom components:

```css
var(--space-1)  /* 4px  */
var(--space-2)  /* 8px  */
var(--space-3)  /* 12px */
var(--space-4)  /* 16px */
var(--space-5)  /* 24px */
var(--space-6)  /* 32px */
var(--space-7)  /* 40px */
var(--space-8)  /* 48px */
var(--space-9)  /* 64px */
```

---

## Layout component props

Spacing is applied through the `m*`, `p*`, and `gap` props on layout components. Prop values are the step numbers as strings (`"1"` through `"9"`):

```jsx
<Box p="4" m="2">          {/* padding: 16px, margin: 8px */}
<Flex gap="3">             {/* gap: 12px */}
<Grid gap="5" p="6">      {/* gap: 24px, padding: 32px */}
```

All layout components (`Box`, `Flex`, `Grid`, `Section`, `Container`) accept spacing props. Directional shorthands are also supported: `px`, `py`, `pt`, `pr`, `pb`, `pl`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`.

---

## Responsive spacing

All spacing props accept responsive breakpoint objects — passing an object instead of a string applies different values at each breakpoint:

```jsx
<Box p={{ initial: "2", sm: "4", lg: "6" }}>
```

Breakpoints: `initial` (mobile-first, no minimum), `xs`, `sm`, `md`, `lg`, `xl`.

---

## Global scaling

The `scaling` prop on `<Theme>` applies a proportional multiplier to all layout-affecting properties — spacing, font size, and line height — across the entire application:

```jsx
<Theme scaling="95%">
  <App />
</Theme>
```

Valid values: `"90%"`, `"95%"`, `"100%"` (default), `"105%"`, `"110%"`.

Custom components can participate in scaling by referencing the `--scaling` CSS variable:

```css
.custom-component {
  width: calc(200px * var(--scaling));
}
```

This is the correct way to implement UI density control — a single `scaling` prop adjusts the whole application uniformly rather than requiring per-component overrides.

---

## Design decisions

- **4px base grid:** Consistent with most contemporary design systems (Material, Carbon, Atlassian). Keeps values mentally mappable to common multiples.
- **Prop-not-class model:** Unlike Tailwind's `p-4`, Radix Themes consumes the scale through typed React props. This keeps spacing usage within the component tree and makes it refactorable with TypeScript tooling.
- **`scaling` for density:** Rather than exposing multiple size tiers for each component, Radix uses a single global multiplier. This is simpler but less granular than Carbon's density modes.