> ## 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. # Margin Utilities: Control External Spacing in AtomicKit > Control external spacing around Elementor elements with AtomicKit's margin, margin-horizontal, margin-vertical, and directional margin utilities. Margin utilities add space *outside* an element's border, pushing it away from surrounding content and container edges. AtomicKit gives you a full set of directional variants — all sides, horizontal axis, vertical axis, and each individual side — plus an `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-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `margin-horizontal-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `margin-vertical-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `margin-top-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `margin-right-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `margin-bottom-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `margin-left-` | `0`, `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12`, `auto` | | `-margin-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `-margin-horizontal-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `-margin-vertical-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `-margin-top-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `-margin-right-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `-margin-bottom-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | | `-margin-left-` | `px`, `1`, `2`, `3`, `4`, `6`, `8`, `12` | ## All-Sides Margin Use `margin-` 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-8 ``` This sets `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-6 ``` Adds `margin-top: 1.5rem` (24px) — useful for pulling a section heading away from content above it. ``` margin-bottom-4 ``` Adds `margin-bottom: 1rem` (16px) — a reliable default for paragraph-level separation. Combine directional classes freely to handle asymmetric spacing needs: ``` margin-top-8 margin-bottom-4 ``` ## Horizontal and Vertical Shorthand The `margin-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: ``` maximum-width-3xl margin-horizontal-auto ``` The `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-vertical-8 ``` Sets `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. ``` -margin-top-4 ``` Pulls the element 1rem (16px) upward, overlapping content above it. ``` -margin-horizontal-6 ``` Extends the element 1.5rem (24px) beyond both horizontal edges of its container — a common technique for making a full-bleed image row inside a padded wrapper. Negative margin classes do not support `auto`. The available values for negative variants are `px`, `1`, `2`, `3`, `4`, `6`, `8`, and `12`. Use negative margins sparingly. They can interfere with Elementor's layout calculations and make spacing harder to debug. Prefer gap utilities on a flex container whenever the goal is simply to remove default spacing between children. ## Best Practices `margin-horizontal-auto` is explicit about its intent and works reliably across container widths. Hardcoded left/right margin values break as the viewport changes. 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. 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. You don't have to commit to `margin-*` all-sides. Stack `margin-top-8 margin-bottom-4` on a heading to reflect the visual weight difference between the space above and below it. ## Related Utilities * **[Padding](/spacing/padding)** — Add space *inside* 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 margin centering