margin

Utilities for controlling an element's margin.

Examples

Basic example

Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element:

<div class="m-8 ...">m-8</div>

Adding margin to a single side

Use mt-<number>, mr-<number>, mb-<number> and ml-<number> utilities to control the margin on one side:

<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>

Using negative values

To use a negative margin value, prefix the class name with a dash:

<div class="h-16 w-36 bg-teal-400 opacity-20 ..."></div>
<div class="-mt-8 bg-teal-500 ...">-mt-8</div>

Adding space between children

Use space-x-<number> or space-y-<number> utilities to control the space between elements:

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Customizing your theme

Use the --spacing and other theme variables to customise the values these utilities generate:

@theme {
  --spacing: 1px;
}