Documentation Index
Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
Use this file to discover all available pages before exploring further.
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 |
Positive families support auto; negative families support numeric steps plus
px only.
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.
<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.
<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.
<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.
<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.
<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.
