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

# Spacing

> Margin and padding utilities built around the bundled spacing scale.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Spacing.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=0cbf9f924dcbe98d7c2fc9c2cfd1afa6" className="dark:hidden block" alt="Spacing overview cover" width="4054" height="2489" data-path="images-for-overview/Spacing.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Spacing%20-%20Dark.png" className="hidden dark:block" alt="Spacing overview cover (dark)" />
</div>

## Overview

Skelementor bundles one spacing scale for margin (outside the box), padding (inside the box), and gap (between flex items). Pick the same numeric suffix across utilities to keep rhythm predictable.

| Family      | Value scale                                                                                           |
| ----------- | ----------------------------------------------------------------------------------------------------- |
| `margin-*`  | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto`                                                 |
| `padding-*` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`                                                         |
| `gap-*`     | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, plus gap-only `10`, `14`, `16`, `18`, `20`, `22`, `24` |

<Info>
  **`margin-*`:** `margin`, `margin-horizontal`, `margin-vertical`, `margin-top`, `margin-bottom`, `margin-left`, `margin-right` (for example `margin-horizontal-4`). **`padding-*`:** `padding`, `padding-horizontal`, `padding-vertical`, `padding-top`, `padding-bottom` (for example `padding-horizontal-6`). **`gap-*`:** `gap`, `gap-x`, or `gap-y` (for example `gap-4`, `gap-x-8`). Margin `auto` works on all margin families, including `margin-top-auto` and `margin-bottom-auto`.
</Info>

<CardGroup cols={2}>
  <Card title="Margin" icon="indent" href="/spacing/margin">
    External spacing with positive, auto, and axis helpers
  </Card>

  <Card title="Padding" icon="distribute-spacing-vertical" href="/spacing/padding">
    Internal spacing with all-side and directional helpers
  </Card>
</CardGroup>

## Common Spacing Patterns

Use the spacing families consistently in cards, forms, and sections so outer spacing, inner padding, and content rhythm all come from the same bundled scale.

## Best Practices

<Steps>
  <Step title="Use the 4px Scale">
    Always use the predefined spacing scale (px, 1, 2, 3, 4, 6, 8, 12) for consistency. This ensures predictable layouts and easier maintenance.
  </Step>

  <Step title="Maintain Vertical Rhythm">
    Use consistent spacing between related elements for better visual flow.
  </Step>

  <Step title="Group Related Elements">
    Use smaller gaps within groups and larger gaps between groups.
  </Step>

  <Step title="Reserve Fixed Helpers For Exceptions">
    Reach for `0`, `px`, and `auto` when you need explicit control beyond the main bundled scale.
  </Step>
</Steps>

## Spacing Hierarchy

1. **Micro spacing (1-2):** Fine adjustments, icon spacing
2. **Small spacing (3-4):** Element internal spacing, form fields
3. **Medium spacing (6):** Section internal spacing, card padding
4. **Large spacing (8-12):** Section spacing, major layout divisions

## Related Utilities

<CardGroup cols={2}>
  <Card title="Layout" icon="grid" href="/concepts/layout">
    Flexbox and display utilities for layout
  </Card>

  <Card title="Sizing" icon="expand" href="/concepts/sizing">
    Width and height utilities for spacing
  </Card>
</CardGroup>