1 is 4px, 2 is 8px, 4 is 16px, and so on up to 12 at 48px. That consistent base means every element you space with AtomicKit naturally aligns with every other element, giving your Elementor layouts a coherent visual rhythm without manual arithmetic.
Spacing Scale
The table below shows every named step in the scale. Thepx token is a special case that maps to exactly 1px — useful for hairline borders and pixel-perfect nudges.
| Token | rem | px |
|---|---|---|
px | — | 1px |
1 | 0.25rem | 4px |
2 | 0.5rem | 8px |
3 | 0.75rem | 12px |
4 | 1rem | 16px |
6 | 1.5rem | 24px |
8 | 2rem | 32px |
12 | 3rem | 48px |
There is no
5, 7, 9, 10, or 11 step in the spacing scale. If you find yourself reaching for an in-between value, consider whether one of the defined steps — or a combination of utilities — can achieve the same goal while keeping your layout consistent.The Three Spacing Families
AtomicKit organizes spacing utilities into three families, each targeting a different relationship between elements. Margin controls the space outside an element’s border — pushing it away from neighboring elements or the edges of its container. Use margin utilities to space elements apart and to center fixed-width blocks horizontally. Padding controls the space inside an element’s border — between the border and the content within. Use padding utilities to add breathing room inside containers, cards, buttons, and widgets. Gap controls the space between flex or grid children inside a container. Rather than adding margin to each child, a single gap utility applies consistent spacing across all items. Gap supports an extended scale that includes additional larger steps (10, 16, 18, 20, 22, 24) beyond the core spacing scale, as well as14 which is available across all gap families.
Margin
Push elements apart and center blocks with margin, margin-horizontal, margin-vertical, and directional variants
Padding
Add inner breathing room with padding, padding-horizontal, padding-vertical, and top/bottom variants
Gap
Space flex and grid children from the container level with gap, gap-x, and gap-y utilities
Spacing Hierarchy Guide
Choosing the right spacing step becomes second nature once you think in tiers. Here is a practical guide to how each part of the scale is typically used:| Tier | Tokens | Typical use |
|---|---|---|
| Micro | 1, 2 | Icon gaps, badge padding, tight inline spacing |
| Small | 3, 4 | Button padding, list item spacing, form field gaps |
| Medium | 6 | Section sub-element spacing, card padding |
| Large | 8, 12 | Section padding, major layout gaps, hero breathing room |
Best Practices
Pick a tier and stay consistent
Decide which spacing tier belongs to which type of relationship — for example, always use
gap-4 between form fields and gap-8 between sections. Consistency is more important than any specific value.Prefer padding for internal spacing, margin for external
Adding
padding-6 to a card keeps its content inset cleanly. Adding margin-bottom-6 to the card itself controls the gap below it. Mixing the two on the same dimension makes spacing harder to reason about.Use gap instead of margin on flex children
When you control the container, apply
gap-4 (or another gap utility) rather than margin-bottom-* on each child. Gap is removed automatically when there are no siblings, so orphaned spacing never breaks your layout.Use margin-horizontal-auto to center
Combine a fixed or maximum width with
margin-horizontal-auto to center a block within its parent. This is the standard centering pattern in AtomicKit — no flexbox tricks required.