Margins
Use margin utilities to control the space between elements.
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.
.m-0
.m-4
.m-8
<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>Start margin
ms-* sets the margin on the start side, which is the left in a left-to-right layout.
<div class="ms-4">...</div>.ms-0
.ms-4
.ms-8
<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>End margin
me-* sets the margin on the end side, which is the right in a left-to-right layout.
<div class="me-4">...</div>.me-0
.me-4
.me-8
<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>Top margin
mt-* sets the margin above an element, for example between stacked sections.
<div class="mt-4">...</div>.mt-0
.mt-4
.mt-8
<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>Bottom margin
mb-* sets the margin below an element.
<div class="mb-4">...</div>.mb-0
.mb-4
.mb-8
<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>Horizontal margin
mx-* sets the start and end margins at once.
<div class="mx-4">...</div>.mx-0
.mx-4
.mx-8
<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>Vertical margin
my-* sets the top and bottom margins at once.
<div class="my-4">...</div>.my-0
.my-4
.my-8
<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>Horizontal centering
.mx-auto centers a block element that has a width, by setting both horizontal margins to auto.
<div class="mx-auto">...</div>.mx-auto
<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>Gap
.gap-* sets the space between the children of a grid or flex container, with the same sizes as the margins.
<div class="d-grid gap-6">...</div><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-*andme-*follow the text direction, whileml-*andmr-*do not. Prefer the logical ones in a layout that has to work in RTL.
