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 – margins, inner padding and component spacing props.
- Responsive spacing – spacing that adapts across breakpoints with
Space.ResponsiveContext. - Flex and Grid – layout and spacing between items.
- Spatial system for designers – the 8px grid and spacing guidance.
See the Spacing guide for CSS custom properties and spacing helpers.