# Margin

Margins are used to provide consistent spacing between components and content throughout your app.

| All round | Top/bottom | Left/right | Top       | Bottom    | Left      | Right     | Equals                    |
| --------- | ---------- | ---------- | --------- | --------- | --------- | --------- | ------------------------- |
| `m-auto`  | `my-auto`  | `mx-auto`  | `mt-auto` | `mb-auto` | `ml-auto` | `mr-auto` |                           |
| `m-0`     | `my-0`     | `mx-0`     | `mt-0`    | `mb-0`    | `ml-0`    | `mr-0`    |                           |
| `m-1`     | `my-1`     | `mx-1`     | `mt-1`    | `mb-1`    | `ml-1`    | `mr-1`    | `--sl-spacing-xxx-small` |
| `m-2`     | `my-2`     | `mx-2`     | `mt-2`    | `mb-2`    | `ml-2`    | `mr-2`    | `--sl-spacing-xx-small` |
| `m-3`     | `my-3`     | `mx-3`     | `mt-3`    | `mb-3`    | `ml-3`    | `mr-3`    | `--sl-spacing-x-small`  |
| `m-4`     | `my-4`     | `mx-4`     | `mt-4`    | `mb-4`    | `ml-4`    | `mr-4`    | `--sl-spacing-small`    |
| `m-5`     | `my-5`     | `mx-5`     | `mt-5`    | `mb-5`    | `ml-5`    | `mr-5`    | `--sl-spacing-medium`   |
| `m-6`     | `my-6`     | `mx-6`     | `mt-6`    | `mb-6`    | `ml-6`    | `mr-6`    | `--sl-spacing-large`    |
| `m-7`     | `my-7`     | `mx-7`     | `mt-7`    | `mb-7`    | `ml-7`    | `mr-7`    | `--sl-spacing-x-large`  |
| `m-8`     | `my-8`     | `mx-8`     | `mt-8`    | `mb-8`    | `ml-8`    | `mr-8`    | `--sl-spacing-xx-large` |
| `m-9`     | `my-9`     | `mx-9`     | `mt-9`    | `mb-9`    | `ml-9`    | `mr-9`    | `--sl-spacing-xxx-large` |

## All-around margin

You can easily add a margin all around your component by using fx. m-5.

```html preview
<div style="border:1px solid #efefef; border-radius: 4px">
  <sl-alert class="m-5" open>This has margin all around it</sl-alert>
</div>
```

## Vertical margin

You can also just add a margin to the top and bottom of your component by adding margin to the y-axis.

```html preview
<div style="border:1px solid #efefef; border-radius: 4px">
  <sl-alert class="my-5" open>This has vertical margins</sl-alert>
</div>
```

## Horizontal margin

Or You can add a margin to the left and right of your component by adding margin to the x-axis.

```html preview
<div style="border:1px solid #efefef; border-radius: 4px">
  <sl-alert class="mx-5" open>This has horizontal margin</sl-alert>
</div>
```

## All different margins

Or why not have some fun. Add different margins to all sides of your component.

```html preview
<div style="border:1px solid #efefef; border-radius: 4px">
  <sl-alert class="mt-3 mr-5 mb-7 ml-9" open>This has weird margins</sl-alert>
</div>
```