---
layout: docs
title: Margin
description: null
---

| Class        | Description                                    |
| ------------ | ---------------------------------------------- |
| `margin-xxl` | Applies `margin: var(--space-xxl);` to element |
| `margin-xl`  | Applies `margin: var(--space-xl);` to element  |
| `margin-l`   | Applies `margin: var(--space-l);` to element   |
| `margin-m`   | Applies `margin: var(--space-m);` to element   |
| `margin-s`   | Applies `margin: var(--space-s);` to element   |
| `margin-xs`  | Applies `margin: var(--space-xs);` to element  |
| `margin-xxs` | Applies `margin: var(--space-xxs);` to element |

## No Margin

| Class                  | Description                                                                                  |
| ---------------------- | -------------------------------------------------------------------------------------------- |
| `no-margin`            | Removes margin. **Note:** `!important` is used to override specificity issues                |
| `no-margin-vertical`   | Removes margin top and bottom. **Note:** `!important` is used to override specificity issues |
| `no-margin-horizontal` | Removes margin left and right. **Note:** `!important` is used to override specificity issues |
| `no-margin-top`        | Removes top margin. **Note:** `!important` is used to override specificity issues            |
| `no-margin-right`      | Removes right margin. **Note:** `!important` is used to override specificity issues          |
| `no-margin-bottom`     | Removes bottom margin. **Note:** `!important` is used to override specificity issues         |
| `no-margin-left`       | Removes left margin. **Note:** `!important` is used to override specificity issues           |

## Margin Auto

| Class                    | Description                                                       |
| ------------------------ | ----------------------------------------------------------------- |
| `margin-auto`            | Applies `margin: auto;` to element                                |
| `margin-vertical-auto`   | Applies `margin-top: auto;` and `margin-bottom: auto;` to element |
| `margin-horizontal-auto` | Applies `margin-left: auto;` and `margin-right: auto;` to element |
| `margin-top-auto`        | Applies `margin-top: auto;` to element                            |
| `margin-right-auto`      | Applies `margin-right: auto;` to element                          |
| `margin-bottom-auto`     | Applies `margin-bottom: auto;` to element                         |
| `margin-left-auto`       | Applies `margin-left: auto;` to element                           |

## Margin Negative

| Class                 | Description                                               |
| --------------------- | --------------------------------------------------------- |
| `margin-negative-xxl` | Applies `margin: calc(var(--space-xxl) * -1);` to element |
| `margin-negative-xl`  | Applies `margin: calc(var(--space-xl) * -1);` to element  |
| `margin-negative-l`   | Applies `margin: calc(var(--space-l) * -1);` to element   |
| `margin-negative-m`   | Applies `margin: calc(var(--space-m) * -1);` to element   |
| `margin-negative-s`   | Applies `margin: calc(var(--space-s) * -1);` to element   |
| `margin-negative-xs`  | Applies `margin: calc(var(--space-xs) * -1);` to element  |
| `margin-negative-xxs` | Applies `margin: calc(var(--space-xxs) * -1);` to element |

## Margin Vertical

### Relative

| Class                 | Description                                                           |
| --------------------- | --------------------------------------------------------------------- |
| `margin-vertical-1`   | Applies `margin-top: 1em;` and `margin-bottom: 1em;` to element       |
| `margin-vertical-3-4` | Applies `margin-top: 0.75em;` and `margin-bottom: 0.75em;` to element |
| `margin-vertical-1-2` | Applies `margin-top: 0.5em;` and `margin-bottom: 0.5em;` to element   |
| `margin-vertical-1-4` | Applies `margin-top: 0.25em;` and `margin-bottom: 0.25em;` to element |

### Sizes

| Class                 | Description                                                                               |
| --------------------- | ----------------------------------------------------------------------------------------- |
| `margin-vertical-xxl` | Applies `margin-top: var(--space-xxl);` and `margin-bottom: var(--space-xxl);` to element |
| `margin-vertical-xl`  | Applies `margin-top: var(--space-xl);` and `margin-bottom: var(--space-xl);` to element   |
| `margin-vertical-l`   | Applies `margin-top: var(--space-l);` and `margin-bottom: var(--space-l);` to element     |
| `margin-vertical-m`   | Applies `margin-top: var(--space-m);` and `margin-bottom: var(--space-m);` to element     |
| `margin-vertical-s`   | Applies `margin-top: var(--space-s);` and `margin-bottom: var(--space-s);` to element     |
| `margin-vertical-xs`  | Applies `margin-top: var(--space-xs);` and `margin-bottom: var(--space-xs);` to element   |
| `margin-vertical-xxs` | Applies `margin-top: var(--space-xxs);` and `margin-bottom: var(--space-xxs);` to element |

## Margin Horizontal

| Class                   | Description                                                                               |
| ----------------------- | ----------------------------------------------------------------------------------------- |
| `margin-horizontal-xxl` | Applies `margin-left: var(--space-xxl);` and `margin-right: var(--space-xxl);` to element |
| `margin-horizontal-xl`  | Applies `margin-left: var(--space-xl);` and `margin-right: var(--space-xl);` to element   |
| `margin-horizontal-l`   | Applies `margin-left: var(--space-l);` and `margin-right: var(--space-l);` to element     |
| `margin-horizontal-m`   | Applies `margin-left: var(--space-m);` and `margin-right: var(--space-m);` to element     |
| `margin-horizontal-s`   | Applies `margin-left: var(--space-s);` and `margin-right: var(--space-s);` to element     |
| `margin-horizontal-xs`  | Applies `margin-left: var(--space-xs);` and `margin-right: var(--space-xs);` to element   |
| `margin-horizontal-xxs` | Applies `margin-left: var(--space-xxs);` and `margin-right: var(--space-xxs);` to element |

## Margin Top

| Class            | Description                                        |
| ---------------- | -------------------------------------------------- |
| `margin-top-xxl` | Applies `margin-top: var(--space-xxl);` to element |
| `margin-top-xl`  | Applies `margin-top: var(--space-xl);` to element  |
| `margin-top-l`   | Applies `margin-top: var(--space-l);` to element   |
| `margin-top-m`   | Applies `margin-top: var(--space-m);` to element   |
| `margin-top-s`   | Applies `margin-top: var(--space-s);` to element   |
| `margin-top-xs`  | Applies `margin-top: var(--space-xs);` to element  |
| `margin-top-xxs` | Applies `margin-top: var(--space-xxs);` to element |

## Margin Right

| Class              | Description                                          |
| ------------------ | ---------------------------------------------------- |
| `margin-right-xxl` | Applies `margin-right: var(--space-xxl);` to element |
| `margin-right-xl`  | Applies `margin-right: var(--space-xl);` to element  |
| `margin-right-l`   | Applies `margin-right: var(--space-l);` to element   |
| `margin-right-m`   | Applies `margin-right: var(--space-m);` to element   |
| `margin-right-s`   | Applies `margin-right: var(--space-s);` to element   |
| `margin-right-xs`  | Applies `margin-right: var(--space-xs);` to element  |
| `margin-right-xxs` | Applies `margin-right: var(--space-xxs);` to element |

## Margin Bottom

| Class               | Description                                           |
| ------------------- | ----------------------------------------------------- |
| `margin-bottom-xxl` | Applies `margin-bottom: var(--space-xxl);` to element |
| `margin-bottom-xl`  | Applies `margin-bottom: var(--space-xl);` to element  |
| `margin-bottom-l`   | Applies `margin-bottom: var(--space-l);` to element   |
| `margin-bottom-m`   | Applies `margin-bottom: var(--space-m);` to element   |
| `margin-bottom-s`   | Applies `margin-bottom: var(--space-s);` to element   |
| `margin-bottom-xs`  | Applies `margin-bottom: var(--space-xs);` to element  |
| `margin-bottom-xxs` | Applies `margin-bottom: var(--space-xxs);` to element |

## Margin Left

| Class             | Description                                         |
| ----------------- | --------------------------------------------------- |
| `margin-left-xxl` | Applies `margin-left: var(--space-xxl);` to element |
| `margin-left-xl`  | Applies `margin-left: var(--space-xl);` to element  |
| `margin-left-l`   | Applies `margin-left: var(--space-l);` to element   |
| `margin-left-m`   | Applies `margin-left: var(--space-m);` to element   |
| `margin-left-s`   | Applies `margin-left: var(--space-s);` to element   |
| `margin-left-xs`  | Applies `margin-left: var(--space-xs);` to element  |
| `margin-left-xxs` | Applies `margin-left: var(--space-xxs);` to element |