auto value for centering and negative steps for overlapping effects. You apply these classes directly in the Elementor Advanced panel’s CSS classes field, just like any other AtomicKit utility.
Available Patterns
The following table shows every margin pattern AtomicKit supports, along with the values available for each.| Class 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 |
All-Sides Margin
Usemargin-<value> to apply the same margin on every side of an element at once. This is the most concise way to add uniform spacing around a standalone widget or card.
margin: 2rem (32px) on all four sides of the element.
Single-Side Margin
Use directional utilities when you need to control only one edge. This is common for spacing elements within a vertical flow or giving a heading extra breathing room below it.margin-top: 1.5rem (24px) — useful for pulling a section heading away from content above it.
margin-bottom: 1rem (16px) — a reliable default for paragraph-level separation.
Combine directional classes freely to handle asymmetric spacing needs:
Horizontal and Vertical Shorthand
Themargin-horizontal-* and margin-vertical-* utilities set both sides of an axis in a single class, replacing the need for separate left/right or top/bottom declarations.
Centering a block with margin-horizontal-auto
This is the standard AtomicKit pattern for horizontally centering a fixed-width or maximum-width element inside its container. Pair it with a sizing utility:
auto value tells the browser to distribute remaining horizontal space equally on both sides, centering the block. This only works when the element has a defined width narrower than its container.
Vertical rhythm shorthand
margin-top: 2rem and margin-bottom: 2rem simultaneously — a clean way to add consistent vertical breathing room around a section or divider element.
Negative Margins
Prefix any margin utility with- to apply a negative value. Negative margins pull an element toward or past neighboring elements and container edges, which is useful for visual overlapping effects, bleed layouts, or compensating for padding on a parent container.
Negative margin classes do not support
auto. The available values for negative variants are px, 1, 2, 3, 4, 6, 8, and 12.Best Practices
Use margin-horizontal-auto for centering, not manual left/right values
margin-horizontal-auto is explicit about its intent and works reliably across container widths. Hardcoded left/right margin values break as the viewport changes.Avoid margin on flex children when you control the container
When you own the parent container, apply
gap-* utilities there instead of margin-* on each child. Gap spacing is symmetric, doesn’t collapse, and disappears cleanly when items wrap or are removed.Reserve negative margins for deliberate overlap effects
Negative margins serve a real purpose for bleed layouts and decorative overlaps. For everyday spacing, stick to positive values so layouts remain predictable at every breakpoint.