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

# Padding Utilities: Control Internal Spacing in AtomicKit

> Add internal spacing inside Elementor elements with AtomicKit's padding, padding-horizontal, padding-vertical, padding-top, and padding-bottom utilities.

Padding utilities add space *inside* an element's border — between the border edge and whatever content lives within. Unlike margin, padding is part of the element's own box, so it affects background area and click targets, not the space between siblings. AtomicKit provides all-sides, horizontal, vertical, top, and bottom variants, giving you precise control over the inset of any Elementor widget, container, or section.

## Available Patterns

The following table shows every padding class pattern AtomicKit currently ships.

| Class pattern                | Supported values                              |
| ---------------------------- | --------------------------------------------- |
| `padding-<value>`            | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` |
| `padding-horizontal-<value>` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` |
| `padding-vertical-<value>`   | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` |
| `padding-top-<value>`        | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` |
| `padding-bottom-<value>`     | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` |

<Note>
  The current AtomicKit bundle does not include `padding-left-*` or `padding-right-*` as standalone utilities. Use `padding-horizontal-*` to apply the same value to both sides, or `padding-*` to set all four sides at once.
</Note>

## All-Sides Padding

Use `padding-<value>` to apply uniform inset spacing on all four sides of an element. This is the most concise option when you want equal breathing room all around — common for cards, buttons, callout boxes, and icon widgets.

```
padding-6
```

Sets `padding: 1.5rem` (24px) on every side. This is a solid default for card components and content containers.

## Horizontal and Vertical Shorthand

Use `padding-horizontal-*` and `padding-vertical-*` when the inset needs to differ between axes — for example, more breathing room on the sides than top and bottom, or vice versa.

### Horizontal padding

```
padding-horizontal-8
```

Sets `padding-left: 2rem` and `padding-right: 2rem` simultaneously. Use this for wide containers where you want the content to sit away from the side edges.

### Vertical padding

```
padding-vertical-4
```

Sets `padding-top: 1rem` and `padding-bottom: 1rem` simultaneously. Combine it with `padding-horizontal-*` for two-axis control:

```
padding-vertical-4 padding-horizontal-8
```

This creates a "pill" inset — tighter top and bottom, wider left and right — common for buttons and inline badges.

## Top and Bottom Padding

Use `padding-top-*` and `padding-bottom-*` when you need independent control over each vertical edge. A common case is a hero section that needs more space at the top (to clear a sticky header) than at the bottom.

```
padding-top-12
```

Adds `padding-top: 3rem` (48px) — a strong inset for hero sections or prominent feature areas.

```
padding-bottom-8
```

Adds `padding-bottom: 2rem` (32px) — useful for footer areas or sections with content directly following.

Combine directional utilities freely for asymmetric vertical insets:

```
padding-top-12 padding-bottom-6
```

## About Missing `padding-left` and `padding-right`

AtomicKit's current bundle intentionally omits standalone `padding-left-*` and `padding-right-*` utilities. In practice, you rarely need to set horizontal padding sides independently:

* For **equal horizontal inset**, use `padding-horizontal-*`.
* For **all-sides padding with a different vertical value**, combine `padding-horizontal-*` with `padding-vertical-*`.
* For **full control of all sides**, start with `padding-*` all-sides and override the vertical edges with `padding-top-*` or `padding-bottom-*`.

<Tip>
  If you genuinely need asymmetric left/right padding (for example, a list with a decorative left border), the AtomicKit Class Creator lets you define a custom utility with exactly the properties you need, keeping your custom CSS inside the design system rather than scattered across widget style panels.
</Tip>

## Best Practices

<Steps>
  <Step title="Use all-sides padding for symmetric components">
    Cards, buttons, badges, and alert boxes almost always benefit from `padding-*` all-sides. It's a single class, it's readable, and it responds cleanly to font size changes.
  </Step>

  <Step title="Combine horizontal and vertical shortcuts for two-axis control">
    `padding-horizontal-8 padding-vertical-4` is cleaner than four separate directional classes and communicates the design intent immediately — wide sides, compact top and bottom.
  </Step>

  <Step title="Add padding to containers, not their children, for consistent insets">
    When you have a section with multiple child widgets, add `padding-*` to the container rather than `margin-*` to each child. The result is the same but the container owns the responsibility for its own inset.
  </Step>

  <Step title="Use padding-top for header clearance on hero sections">
    Sticky or fixed headers overlap content. Add `padding-top-12` or `padding-top-8` to a hero section so the headline clears the header at all viewport widths.
  </Step>

  <Step title="Reset padding with padding-0 rather than overrides">
    If an Elementor widget applies default padding you want to remove, use `padding-0` instead of setting a custom value in the style panel. The utility class will take precedence and keep the reset visible in your class list.
  </Step>
</Steps>

## Related Utilities

* **[Margin](/spacing/margin)** — Add space *outside* an element's border
* **[Gap](/flexbox/gap)** — Space flex and grid children from the container level
* **[Sizing](/concepts/sizing)** — Control element dimensions that interact with padding and layout