---
title: Margins
summary: Use margin utilities to control the space between elements.
description: Control the space between elements with margin utilities.
---
Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
### 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
Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
### Start margin
Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
### End margin
End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
### Top margin
Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
### Bottom margin
Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
### Horizontal margin
Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
### Vertical margin
Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Horizontal centering
Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content — that is, content that has `display: block` and a width set — by setting the horizontal margins to `auto`.
```html
...
```
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Gap
Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
```html
...
```
```html example
Grid item 1
Grid item 2
Grid item 3
```