Margins
Use margin utilities to control the space between elements.
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.
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-.
<div class="ms-4">...</div>
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-.
<div class="me-4">...</div>
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-.
<div class="mt-4">...</div>
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-.
<div class="mb-4">...</div>
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.
<div class="mx-4">...</div>
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.
<div class="my-4">...</div>
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.
<div class="mx-auto">...</div>
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.
<div class="d-grid gap-6">...</div>
