- Spacing
- Margin
Spacing
margin
Utilities for controlling an element's margin.
| Class | Styles |
|---|---|
m-<number> | margin: calc(var(--spacing) * <number>); |
mx-<number> | margin-inline: calc(var(--spacing) * <number>); |
my-<number> | margin-block: calc(var(--spacing) * <number>); |
ms-<number> | margin-inline-start: calc(var(--spacing) * <number>) |
me-<number> | margin-inline-end: calc(var(--spacing) * <number>) |
mt-<number> | margin-top: calc(var(--spacing) * <number>) |
mr-<number> | margin-right: calc(var(--spacing) * <number>) |
mb-<number> | margin-bottom: calc(var(--spacing) * <number>) |
ml-<number> | margin-left: calc(var(--spacing) * <number>) |
m-(<custom-property>) | margin: var(<custom-property>); |
m-[<value>] | margin: <value>; |
Examples
Add margin to a single side
Use the mt-*, mr-*, mb-*, and ml-* utilities to control the margin on one side of an element.
For example, mt-6 would add 1.5rem of margin to the top of an element, mr-4 would add 1rem of margin to the right of an element, mb-8 would add 2rem of margin to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.
mr-4
ml-2
<div class="mt-6 ...">mt-6</div><div class="mr-4 ...">mr-4</div><div class="mb-8 ...">mb-8</div><div class="ml-2 ...">ml-2</div>Add horizontal margin
Use the mx-* utilities to control the horizontal margin of an element:
mx-8
<div class="mx-8 ...">mx-8</div>Add vertical margin
Use the my-* utilities to control the vertical margin of an element:
my-8
<div class="my-8 ...">my-8</div>Add margin to all sides
Use the m-* utilities to control the margin on all sides of an element:
m-8
<div class="m-8 ...">m-8</div>Using negative values
To use a negative margin value, prefix the class name with a dash to convert it to a negative value:
-mt-8
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>Using logical properties
Use the ms-* and me-* utilities to set the margin-inline-start and margin-inline-end logical properties:
Left-to-right
Right-to-left
<div dir="ltr"> <div className="ms-8 ...">ms-8</div> <div className="me-8 ...">me-8</div> <div> <div dir="rtl"> <div className="ms-8 ...">ms-8</div> <div className="me-8 ...">me-8</div> <div></div> </div> </div></div>Referencing a variable
Use the margin-(<custom-property>) syntax to set the margin based on a custom property:
<div class="margin-(--my-margin) ..."> <!-- ... --></div>Using a custom value
Use the margin-[<value>] syntax to set the margin based on a completely custom value:
<div class="margin-[5px] ..."> <!-- ... --></div>Responsive design
Prefix a margin utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="mt-4 md:mt-8"> <!-- ... --></div>Learn more about using variants in the variants documentation.
Customizing your theme
Use the --margin-* theme variables to customize the margin utilities in your project:
@theme { --margin-5px: 5px; }Now the margin-5px utility can be used in your markup:
<div class="margin-5px"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.
