> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Spacing Utilities: Margin, Padding & Gap in AtomicKit

> AtomicKit's spacing system uses a consistent 4px scale for margin, padding, and gap utilities to create predictable rhythm in your Elementor layouts.

AtomicKit bundles a single spacing scale shared by the margin, padding, and gap utility families. Every step maps to a multiple of 4px — so `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. The `px` 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 |

<Note>
  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.
</Note>

## 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 as `14` which is available across all gap families.

<CardGroup cols={3}>
  <Card title="Margin" icon="arrows-left-right-to-line" href="/spacing/margin">
    Push elements apart and center blocks with margin, margin-horizontal, margin-vertical, and directional variants
  </Card>

  <Card title="Padding" icon="border-inner" href="/spacing/padding">
    Add inner breathing room with padding, padding-horizontal, padding-vertical, and top/bottom variants
  </Card>

  <Card title="Gap" icon="table-cells" href="/flexbox/gap">
    Space flex and grid children from the container level with gap, gap-x, and gap-y utilities
  </Card>
</CardGroup>

## 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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Avoid mixing rem and px tokens in the same component">
    The `px` token (1px) is a precision tool. If you reach for it alongside rem-based steps, make sure the context genuinely calls for a hairline rather than a scaled step.
  </Step>
</Steps>