# Margins > Use margin utilities to control the space between elements. Control the space between elements with margin utilities. Source: https://docs.tabler.io/ui/utilities/margins --- 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. ```html
.m-0
.m-4
.m-8
``` ## Start margin `ms-*` sets the margin on the start side, which is the left in a left-to-right layout. ```html
...
``` ```html
.ms-0
.ms-4
.ms-8
``` ## End margin `me-*` sets the margin on the end side, which is the right in a left-to-right layout. ```html
...
``` ```html
.me-0
.me-4
.me-8
``` ## Top margin `mt-*` sets the margin above an element, for example between stacked sections. ```html
...
``` ```html
.mt-0
.mt-4
.mt-8
``` ## Bottom margin `mb-*` sets the margin below an element. ```html
...
``` ```html
.mb-0
.mb-4
.mb-8
``` ## Horizontal margin `mx-*` sets the start and end margins at once. ```html
...
``` ```html
.mx-0
.mx-4
.mx-8
``` ## Vertical margin `my-*` sets the top and bottom margins at once. ```html
...
``` ```html
.my-0
.my-4
.my-8
``` ## Horizontal centering `.mx-auto` centers a block element that has a width, by setting both horizontal margins to `auto`. ```html
...
``` ```html
.mx-auto
``` ## Gap `.gap-*` sets the space between the children of a grid or flex container, with the same sizes as the margins. ```html
...
``` ```html example
Grid item 1
Grid item 2
Grid item 3
``` ## 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.