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

# Padding

> Control internal spacing with the bundled Skelementor padding utilities.

export const PaddingVerticalDemo = () => {
  return <div className="not-prose sk-padding-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">padding-vertical-8</span>
        <div className="tw-demo-stripes sk-padding-stage">
          <div className="sk-padding-card" style={{
    paddingTop: "2rem",
    paddingBottom: "2rem"
  }}>
            <div className="sk-padding-card__content sk-padding-card__content--wide">
              padding-vertical-8
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const PaddingSingleSideDemo = () => {
  return <div className="not-prose sk-padding-demo-shell">
      <div className="tw-demo">
        <div className="sk-padding-demo-grid">
          <div>
            <span className="tw-label">padding-top-6</span>
            <div className="tw-demo-stripes sk-padding-stage">
              <div className="sk-padding-card" style={{
    paddingTop: "1.5rem"
  }}>
                <div className="sk-padding-card__content">padding-top-6</div>
              </div>
            </div>
          </div>
          <div>
            <span className="tw-label">padding-bottom-8</span>
            <div className="tw-demo-stripes sk-padding-stage">
              <div className="sk-padding-card" style={{
    paddingBottom: "2rem"
  }}>
                <div className="sk-padding-card__content">padding-bottom-8</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const PaddingHorizontalDemo = () => {
  return <div className="not-prose sk-padding-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">padding-horizontal-8</span>
        <div className="tw-demo-stripes sk-padding-stage">
          <div className="sk-padding-card" style={{
    paddingLeft: "2rem",
    paddingRight: "2rem"
  }}>
            <div className="sk-padding-card__content sk-padding-card__content--slim">
              padding-horizontal-8
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const PaddingBasicDemo = () => {
  return <div className="not-prose sk-padding-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">padding-8</span>
        <div className="tw-demo-stripes sk-padding-stage">
          <div className="sk-padding-card" style={{
    padding: "2rem"
  }}>
            <div className="sk-padding-card__content">padding-8</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

Padding adds space inside an element, between its content and its edge. In Elementor this is what makes cards feel roomy, buttons feel clickable, and content blocks stop hugging their borders. Skelementor currently ships `padding`, `padding-horizontal`, `padding-vertical`, `padding-top`, and `padding-bottom`.

This page documents only the bundled Skelementor padding families, so every example and table below maps directly to classes you can use today.

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

## Examples

### Basic example

Use `padding-<value>` when the same amount of inner space should apply on every side of a card, panel, or Elementor content box. It is the most direct way to give content breathing room without changing the element’s outer footprint.

<PaddingBasicDemo />

```html theme={null}
<div class="elementor-element background-gray-light padding-4 rounded">
  <div class="padding-8 rounded background-primary text-white text-center">padding-8</div>
</div>
```

| Pattern           | Supported classes                                                                                                     | What it controls          |
| ----------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `padding-<value>` | `padding-0`, `padding-px`, `padding-1`, `padding-2`, `padding-3`, `padding-4`, `padding-6`, `padding-8`, `padding-12` | Padding on all four sides |

### Adding padding to one side

Skelementor currently includes the top and bottom single-side padding families only. Use `padding-top-<value>` when content needs more room above it, and `padding-bottom-<value>` when the extra breathing room belongs below it.

<PaddingSingleSideDemo />

```html theme={null}
<div class="elementor-element flex flex-col gap-6">
  <div class="rounded background-primary text-white text-center padding-top-6 padding-bottom-2">padding-top-6</div>
  <div class="rounded background-primary text-white text-center padding-top-2 padding-bottom-8">padding-bottom-8</div>
</div>
```

| Pattern                  | Supported classes                                                                                                                                                                    | What it controls    |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------- |
| `padding-top-<value>`    | `padding-top-0`, `padding-top-px`, `padding-top-1`, `padding-top-2`, `padding-top-3`, `padding-top-4`, `padding-top-6`, `padding-top-8`, `padding-top-12`                            | Top padding only    |
| `padding-bottom-<value>` | `padding-bottom-0`, `padding-bottom-px`, `padding-bottom-1`, `padding-bottom-2`, `padding-bottom-3`, `padding-bottom-4`, `padding-bottom-6`, `padding-bottom-8`, `padding-bottom-12` | Bottom padding only |

### Adding horizontal padding

Use `padding-horizontal-<value>` when left and right spacing should move together. This is useful for buttons, content rows, and boxed text where the horizontal rhythm needs to be stronger than the vertical rhythm.

<PaddingHorizontalDemo />

```html theme={null}
<div class="elementor-element background-gray-light padding-2 rounded">
  <div class="padding-horizontal-8 padding-vertical-2 rounded background-primary text-white text-center">padding-horizontal-8</div>
</div>
```

| Pattern                      | Supported classes                                                                                                                                                                                                        | What it controls                |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- |
| `padding-horizontal-<value>` | `padding-horizontal-0`, `padding-horizontal-px`, `padding-horizontal-1`, `padding-horizontal-2`, `padding-horizontal-3`, `padding-horizontal-4`, `padding-horizontal-6`, `padding-horizontal-8`, `padding-horizontal-12` | Left and right padding together |

### Adding vertical padding

Use `padding-vertical-<value>` when the top and bottom should expand together without making the element wider. This works well for stacked callouts, promo boxes, and button styles that need a taller silhouette.

<PaddingVerticalDemo />

```html theme={null}
<div class="elementor-element background-gray-light padding-4 rounded inline-block">
  <div class="padding-vertical-8 padding-horizontal-4 rounded background-primary text-white text-center">padding-vertical-8</div>
</div>
```

| Pattern                    | Supported classes                                                                                                                                                                                      | What it controls                |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- |
| `padding-vertical-<value>` | `padding-vertical-0`, `padding-vertical-px`, `padding-vertical-1`, `padding-vertical-2`, `padding-vertical-3`, `padding-vertical-4`, `padding-vertical-6`, `padding-vertical-8`, `padding-vertical-12` | Top and bottom padding together |

## Best Practices

* Use `padding-<value>` for cards and wrappers that need even inner spacing on every side.
* Use `padding-horizontal-<value>` and `padding-vertical-<value>` when horizontal and vertical rhythm should be different.
* Use `padding-top-<value>` and `padding-bottom-<value>` when only the top or bottom edge needs extra room.
* Keep the same padding values across the same component family so Elementor layouts feel consistent.