--- 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 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. ```html example hide-code centered separated vertical
.m-0
.m-4
.m-8
``` ### 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
...
``` ```html example hide-code centered separated vertical
.ms-0
.ms-4
.ms-8
``` ### 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
...
``` ```html example hide-code centered separated vertical
.me-0
.me-4
.me-8
``` ### 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
...
``` ```html example hide-code centered separated vertical
.mt-0
.mt-4
.mt-8
``` ### 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
...
``` ```html example hide-code centered separated vertical
.mb-0
.mb-4
.mb-8
``` ### 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
...
``` ```html example hide-code centered separated vertical
.mx-0
.mx-4
.mx-8
``` ### 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
...
``` ```html example hide-code centered separated vertical
.my-0
.my-4
.my-8
``` ## 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
...
``` ```html example hide-code centered vertical
.mx-auto
``` ## 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
```