| description | Specify global spacing for your website |
|---|
Spacing provides reusable values for gaps, padding, margins, positioning, and other layout controls. A shared scale creates consistent visual rhythm and makes site-wide adjustments easier.
The inherited scale shows each value in rem and its pixel equivalent.
The selected theme supplies a spacing scale with familiar names such as 0, px, 0.5, 1, 1.5, 2, and larger steps. Components refer to the name rather than storing a one-off measurement.
At the standard browser root size:
| Name | Rem | Pixels |
|---|---|---|
0 |
0 | 0px |
px |
0.0625rem | 1px |
0.5 |
0.125rem | 2px |
1 |
0.25rem | 4px |
2 |
0.5rem | 8px |
3 |
0.75rem | 12px |
4 |
1rem | 16px |
The scale continues with larger values for section spacing and layout.
- Open Theme Studio → Spacing.
- Select the plus button beside Custom Spacing.
- Enter a meaningful Name.
- Set the value in rem using the field, stepper, or slider.
- Use the new value in compatible Component controls.
The pixel value shown in Theme Studio is a convenient equivalent. Elements stores the scale in rem so it remains relative to the project’s root text size.
{% hint style="info" %} Before adding a custom value, check whether a nearby theme value will work. A smaller scale is easier to use consistently. {% endhint %}
- Use neighbouring scale values for related distances.
- Reserve large values for major section separation.
- Use smaller values for gaps inside a component.
- Keep vertical rhythm consistent across repeated sections.
- Review spacing at every enabled Screen; a desktop-sized gap may be excessive on Mobile.
See Common Controls → Spacing for how the shared scale is applied as margin and padding.