---
title: Margins
summary: Use margin utilities to control the space between elements.
description: Control the space between elements with margin utilities.
related: [/ui/utilities/vertical-align]
---
import Example from '@components/Example.astro';

Margin utilities set the space around an element with a class, so you don't write CSS for spacing. Every direction uses the same sizes, listed in the table below.


## Margin size

In the table below you can see the available margin sizes.

Name|Value
-|-
0|0
1|0.25rem
2|0.5rem
3|1rem
4|1.5rem
5|2rem
6|3rem
7|5rem
8|8rem


## Margin

`.m-*` sets the margin on all four sides.

<Example>
<div class="d-flex">
  <div class="bg-purple-lt">
    <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-purple-lt">
    <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-purple-lt">
    <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
  </div>
</div>
</Example>

## Start margin

`ms-*` sets the margin on the start side, which is the left in a left-to-right layout.

```html
<div class="ms-4">...</div>
```

<Example>
<div class="d-flex">
  <div class="bg-red-lt">
    <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-red-lt">
    <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-red-lt">
    <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
  </div>
</div>
</Example>

## End margin

`me-*` sets the margin on the end side, which is the right in a left-to-right layout.

```html
<div class="me-4">...</div>
```

<Example>
<div class="d-flex">
  <div class="bg-orange-lt">
    <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-orange-lt">
    <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-orange-lt">
    <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
  </div>
</div>
</Example>

## Top margin

`mt-*` sets the margin above an element, for example between stacked sections.

```html
<div class="mt-4">...</div>
```

<Example>
<div class="d-flex">
  <div class="bg-yellow-lt">
    <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-yellow-lt">
    <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-yellow-lt">
    <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
  </div>
</div>
</Example>

## Bottom margin

`mb-*` sets the margin below an element.

```html
<div class="mb-4">...</div>
```

<Example>
<div class="d-flex">
  <div class="bg-lime-lt">
    <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-lime-lt">
    <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-lime-lt">
    <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
  </div>
</div>
</Example>

## Horizontal margin

`mx-*` sets the start and end margins at once.

```html
<div class="mx-4">...</div>
```

<Example>
<div class="d-flex">
  <div class="bg-azure-lt">
    <div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-azure-lt">
    <div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-azure-lt">
    <div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
  </div>
</div>
</Example>


## Vertical margin

`my-*` sets the top and bottom margins at once.

```html
<div class="my-4">...</div>
```

<Example>
<div class="d-flex">
  <div class="bg-blue-lt">
    <div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-blue-lt">
    <div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
  </div>
</div>
<div class="d-flex">
  <div class="bg-blue-lt">
    <div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
  </div>
</div>
</Example>

## Horizontal centering

`.mx-auto` centers a block element that has a width, by setting both horizontal margins to `auto`.

```html
<div class="mx-auto">...</div>
```

<Example>
<div class="bg-teal-lt w-100 d-flex">
  <div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div>
</div>
</Example>

## Gap

`.gap-*` sets the space between the children of a grid or flex container, with the same sizes as the margins.

```html
<div class="d-grid gap-6">...</div>
```

```html example
<div class="d-grid gap-6 bg-indigo-lt">
  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
</div>
```

## Accessibility

- Spacing carries grouping. Items that belong together should sit closer than items that do not, and that grouping has to exist in the markup too - a list, a `fieldset`, a section.
- Do not replace a heading with a large margin. Whitespace is invisible to a screen reader.
- Space between interactive controls keeps them apart for anyone with a shaky hand. Keep touch targets at least 24 by 24 pixels with a gap between them.
- The margin utilities are direction aware, so `ms-*` and `me-*` follow the text direction, while `ml-*` and `mr-*` do not. Prefer the logical ones in a layout that has to work in RTL.