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

# Margin

> Control external spacing with the shipped Skelementor margin utilities.

export const MarginVerticalDemo = () => {
  return <div className="not-prose sk-margin-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">margin-vertical-8</span>
        <div className="tw-demo-stripes sk-margin-stage">
          <div className="sk-margin-frame sk-margin-frame--column">
            <div className="sk-margin-block sk-margin-block--compact" style={{
    marginTop: "2rem",
    marginBottom: "2rem"
  }}>margin-vertical-8</div>
          </div>
        </div>
      </div>
    </div>;
};

export const MarginSingleSideDemo = () => {
  return <div className="not-prose sk-margin-demo-shell">
      <div className="tw-demo">
        <div className="sk-margin-demo-grid">
          <div>
            <span className="tw-label">margin-top-6</span>
            <div className="tw-demo-stripes sk-margin-stage">
              <div className="sk-margin-frame sk-margin-frame--column">
                <div className="sk-margin-block sk-margin-block--compact" style={{
    marginTop: "1.5rem"
  }}>margin-top-6</div>
              </div>
            </div>
          </div>
          <div>
            <span className="tw-label">margin-right-4</span>
            <div className="tw-demo-stripes sk-margin-stage">
              <div className="sk-margin-frame sk-margin-frame--row">
                <div className="sk-margin-block sk-margin-block--compact" style={{
    marginRight: "1rem"
  }}>margin-right-4</div>
              </div>
            </div>
          </div>
          <div>
            <span className="tw-label">margin-bottom-8</span>
            <div className="tw-demo-stripes sk-margin-stage">
              <div className="sk-margin-frame sk-margin-frame--column">
                <div className="sk-margin-block sk-margin-block--compact" style={{
    marginBottom: "2rem"
  }}>margin-bottom-8</div>
              </div>
            </div>
          </div>
          <div>
            <span className="tw-label">margin-left-2</span>
            <div className="tw-demo-stripes sk-margin-stage">
              <div className="sk-margin-frame sk-margin-frame--row">
                <div className="sk-margin-block sk-margin-block--compact" style={{
    marginLeft: "0.5rem"
  }}>margin-left-2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MarginNegativeDemo = () => {
  return <div className="not-prose sk-margin-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">-margin-top-8</span>
        <div className="tw-demo-stripes sk-margin-stage">
          <div className="sk-margin-frame sk-margin-frame--column sk-margin-frame--negative">
            <div className="sk-margin-block sk-margin-block--ghost">reference block</div>
            <div className="sk-margin-block sk-margin-block--compact" style={{
    marginTop: "-2rem"
  }}>-margin-top-8</div>
          </div>
        </div>
      </div>
    </div>;
};

export const MarginHorizontalDemo = () => {
  return <div className="not-prose sk-margin-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">margin-horizontal-8</span>
        <div className="tw-demo-stripes sk-margin-stage">
          <div className="sk-margin-frame sk-margin-frame--row">
            <div className="sk-margin-block sk-margin-block--compact" style={{
    marginLeft: "2rem",
    marginRight: "2rem"
  }}>margin-horizontal-8</div>
          </div>
        </div>
      </div>
    </div>;
};

export const MarginBasicDemo = () => {
  return <div className="not-prose sk-margin-demo-shell">
      <div className="tw-demo">
        <span className="tw-label">margin-8</span>
        <div className="tw-demo-stripes sk-margin-stage">
          <div className="sk-margin-frame sk-margin-frame--row">
            <div className="sk-margin-block" style={{
    margin: "2rem"
  }}>margin-8</div>
          </div>
        </div>
      </div>
    </div>;
};

## Overview

Margin adds space outside an element, so it is the utility you use when Elementor sections, cards, buttons, or content blocks need breathing room from whatever sits around them. Skelementor ships the classic physical margin families only: `margin`, `margin-horizontal`, `margin-vertical`, `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.

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

| Pattern                      | Supported values                                      |
| ---------------------------- | ----------------------------------------------------- |
| `margin-<value>`             | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `margin-horizontal-<value>`  | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `margin-vertical-<value>`    | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `margin-top-<value>`         | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `margin-right-<value>`       | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `margin-bottom-<value>`      | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `margin-left-<value>`        | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` |
| `-margin-<value>`            | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |
| `-margin-horizontal-<value>` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |
| `-margin-vertical-<value>`   | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |
| `-margin-top-<value>`        | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |
| `-margin-right-<value>`      | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |
| `-margin-bottom-<value>`     | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |
| `-margin-left-<value>`       | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`              |

<Info>
  Positive families support `auto`; negative families support numeric steps plus
  `px` only.
</Info>

## Examples

### Basic example

Use `margin-*` when the same amount of outside space should apply on every side of an Elementor block. This is the quickest way to give a card, notice, or promo tile equal breathing room from all directions.

<MarginBasicDemo />

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

| Pattern          | Supported classes                                                                                                           | What it controls         |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| `margin-<value>` | `margin-0`, `margin-px`, `margin-1`, `margin-2`, `margin-3`, `margin-4`, `margin-6`, `margin-8`, `margin-12`, `margin-auto` | All four margins at once |

### Adding margin to a single side

Use the single-side families when only one edge of an element needs separation. In Elementor this is the common case for stacked headings (`margin-bottom-*`), buttons sitting next to each other (`margin-right-*`), or blocks that need a controlled nudge from one direction without disturbing the other three sides.

<MarginSingleSideDemo />

```html theme={null}
<div class="elementor-element flex flex-col gap-6">
  <div class="background-gray-light padding-4 rounded">
    <div class="margin-top-6 rounded background-primary text-white text-center padding-3">margin-top-6</div>
  </div>
  <div class="background-gray-light padding-4 rounded flex justify-start">
    <div class="margin-right-4 rounded background-primary text-white text-center padding-3">margin-right-4</div>
  </div>
  <div class="background-gray-light padding-4 rounded">
    <div class="margin-bottom-8 rounded background-primary text-white text-center padding-3">margin-bottom-8</div>
  </div>
  <div class="background-gray-light padding-4 rounded flex justify-end">
    <div class="margin-left-2 rounded background-primary text-white text-center padding-3">margin-left-2</div>
  </div>
</div>
```

| Pattern                 | Supported classes                                                                                                                                                                                 | What it controls   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `margin-top-<value>`    | `margin-top-0`, `margin-top-px`, `margin-top-1`, `margin-top-2`, `margin-top-3`, `margin-top-4`, `margin-top-6`, `margin-top-8`, `margin-top-12`, `margin-top-auto`                               | Top margin only    |
| `margin-right-<value>`  | `margin-right-0`, `margin-right-px`, `margin-right-1`, `margin-right-2`, `margin-right-3`, `margin-right-4`, `margin-right-6`, `margin-right-8`, `margin-right-12`, `margin-right-auto`           | Right margin only  |
| `margin-bottom-<value>` | `margin-bottom-0`, `margin-bottom-px`, `margin-bottom-1`, `margin-bottom-2`, `margin-bottom-3`, `margin-bottom-4`, `margin-bottom-6`, `margin-bottom-8`, `margin-bottom-12`, `margin-bottom-auto` | Bottom margin only |
| `margin-left-<value>`   | `margin-left-0`, `margin-left-px`, `margin-left-1`, `margin-left-2`, `margin-left-3`, `margin-left-4`, `margin-left-6`, `margin-left-8`, `margin-left-12`, `margin-left-auto`                     | Left margin only   |

### Adding horizontal margin

Use `margin-horizontal-*` when the left and right sides should move together. This is useful for centering or spacing contained content inside a wider Elementor wrapper while keeping the top and bottom relationship unchanged.

<MarginHorizontalDemo />

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

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

### Adding vertical margin

Use `margin-vertical-*` when an Elementor item needs more room above and below but should stay anchored horizontally. This works well for callout rows, media blocks, and repeated content items that need stronger vertical rhythm.

<MarginVerticalDemo />

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

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

### Using negative values

Use a leading dash when you deliberately want one element to pull into the space of another. In Elementor this is usually a controlled overlap move: a card rising into a hero area, a badge sitting partly over an image, or a caption tucking upward toward the block above it.

<MarginNegativeDemo />

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

| Pattern                      | Supported classes                                                                                                                                                                                | What it controls                                 |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
| `-margin-<value>`            | `-margin-px`, `-margin-1`, `-margin-2`, `-margin-3`, `-margin-4`, `-margin-6`, `-margin-8`, `-margin-12`                                                                                         | Pulls all four margins inward                    |
| `-margin-horizontal-<value>` | `-margin-horizontal-px`, `-margin-horizontal-1`, `-margin-horizontal-2`, `-margin-horizontal-3`, `-margin-horizontal-4`, `-margin-horizontal-6`, `-margin-horizontal-8`, `-margin-horizontal-12` | Pulls left and right margins inward              |
| `-margin-vertical-<value>`   | `-margin-vertical-px`, `-margin-vertical-1`, `-margin-vertical-2`, `-margin-vertical-3`, `-margin-vertical-4`, `-margin-vertical-6`, `-margin-vertical-8`, `-margin-vertical-12`                 | Pulls top and bottom margins inward              |
| `-margin-top-<value>`        | `-margin-top-px`, `-margin-top-1`, `-margin-top-2`, `-margin-top-3`, `-margin-top-4`, `-margin-top-6`, `-margin-top-8`, `-margin-top-12`                                                         | Pulls the top edge upward                        |
| `-margin-right-<value>`      | `-margin-right-px`, `-margin-right-1`, `-margin-right-2`, `-margin-right-3`, `-margin-right-4`, `-margin-right-6`, `-margin-right-8`, `-margin-right-12`                                         | Pulls the right edge outward                     |
| `-margin-bottom-<value>`     | `-margin-bottom-px`, `-margin-bottom-1`, `-margin-bottom-2`, `-margin-bottom-3`, `-margin-bottom-4`, `-margin-bottom-6`, `-margin-bottom-8`, `-margin-bottom-12`                                 | Pulls the bottom edge upward into the next block |
| `-margin-left-<value>`       | `-margin-left-px`, `-margin-left-1`, `-margin-left-2`, `-margin-left-3`, `-margin-left-4`, `-margin-left-6`, `-margin-left-8`, `-margin-left-12`                                                 | Pulls the left edge outward                      |

## Best Practices

* Use `margin-*` when the whole element needs separation from its surroundings.
* Use single-side classes for headings, buttons, and stacked Elementor content where only one edge needs adjustment.
* Use `margin-horizontal-auto` when a constrained block should center inside a wider wrapper.
* Treat negative margins as a layout effect, not a default spacing strategy.