mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
244 lines
6.0 KiB
Plaintext
244 lines
6.0 KiB
Plaintext
---
|
|
title: Margins
|
|
summary: Use margin utilities to control the space between elements.
|
|
description: Control the space between elements with margin utilities.
|
|
related: [/ui/utilities/vertical-align]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
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.
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Start margin
|
|
|
|
`ms-*` sets the margin on the start side, which is the left in a left-to-right layout.
|
|
|
|
```html
|
|
<div class="ms-4">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## End margin
|
|
|
|
`me-*` sets the margin on the end side, which is the right in a left-to-right layout.
|
|
|
|
```html
|
|
<div class="me-4">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Top margin
|
|
|
|
`mt-*` sets the margin above an element, for example between stacked sections.
|
|
|
|
```html
|
|
<div class="mt-4">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Bottom margin
|
|
|
|
`mb-*` sets the margin below an element.
|
|
|
|
```html
|
|
<div class="mb-4">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Horizontal margin
|
|
|
|
`mx-*` sets the start and end margins at once.
|
|
|
|
```html
|
|
<div class="mx-4">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
|
|
## Vertical margin
|
|
|
|
`my-*` sets the top and bottom margins at once.
|
|
|
|
```html
|
|
<div class="my-4">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Horizontal centering
|
|
|
|
`.mx-auto` centers a block element that has a width, by setting both horizontal margins to `auto`.
|
|
|
|
```html
|
|
<div class="mx-auto">...</div>
|
|
```
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Gap
|
|
|
|
`.gap-*` sets the space between the children of a grid or flex container, with the same sizes as the margins.
|
|
|
|
```html
|
|
<div class="d-grid gap-6">...</div>
|
|
```
|
|
|
|
```html example
|
|
<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-*` 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.
|