---
version: 0.0.0-development
generatedAt: 2026-10-23T12:32:44.497Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

## Spacing

Eufemia's spacing scale provides named values for margins, padding and gaps through the existing `--spacing-*` CSS properties. Pass the matching names, such as `small` or `large`, to the Space component and component spacing props. These properties are part of Eufemia's established spacing API.


| Pixel | Type       | Rem      | CSS Variable         |
| ----- | ---------- | -------- | -------------------- |
| 4     | `xx-small` | **0.25** | `--spacing-xx-small` |
| 8     | `x-small`  | **0.5**  | `--spacing-x-small`  |
| 16    | `small`    | **1**    | `--spacing-small`    |
| 24    | `medium`   | **1.5**  | `--spacing-medium`   |
| 32    | `large`    | **2**    | `--spacing-large`    |
| 48    | `x-large`  | **3**    | `--spacing-x-large`  |
| 56    | `xx-large` | **3.5**  | `--spacing-xx-large` |

**NB:** When combining sizes we only allow increments of `0.5rem`, so `xx-small` will not increment by `0.25rem` when combined with other sizes.


- [Space](/uilib/layout/space/) – margins, inner padding and component spacing props.
- [Responsive spacing](/uilib/layout/space/#responsive-spacing) – spacing that adapts across breakpoints with `Space.ResponsiveContext`.
- [Flex](/uilib/layout/flex/) and [Grid](/uilib/layout/grid/) – layout and spacing between items.
- [Spatial system for designers](/quickguide-designer/spatial-system/) – the 8px grid and spacing guidance.

See the [Spacing guide](/uilib/layout/spacing/) for CSS custom properties and spacing helpers.