Spacing
Utilities for controlling an element's margin.
Class | Styles |
---|---|
m-<number> | margin: calc(var(--spacing) * <number>); |
-m-<number> | margin: calc(var(--spacing) * -<number>); |
m-(<custom-property>) | margin: var(<custom-property>); |
m-[<value>] | margin: <value>; |
mx-<number> | margin-inline: calc(var(--spacing) * <number>); |
-mx-<number> | margin-inline: calc(var(--spacing) * -<number>); |
mx-(<custom-property>) | margin-inline: var(<custom-property>); |
mx-[<value>] | margin-inline: <value>; |
my-<number> | margin-block: calc(var(--spacing) * <number>); |
-my-<number> | margin-block: calc(var(--spacing) * -<number>); |
my-(<custom-property>) | margin-block: var(<custom-property>); |
my-[<value>] | margin-block: <value>; |
ms-<number> | margin-inline-start: calc(var(--spacing) * <number>); |
-ms-<number> | margin-inline-start: calc(var(--spacing) * -<number>); |
ms-(<custom-property>) | margin-inline-start: var(<custom-property>); |
ms-[<value>] | margin-inline-start: <value>; |
me-<number> | margin-inline-end: calc(var(--spacing) * <number>); |
-me-<number> | margin-inline-end: calc(var(--spacing) * -<number>); |
me-(<custom-property>) | margin-inline-end: var(<custom-property>); |
me-[<value>] | margin-inline-end: <value>; |
mt-<number> | margin-top: calc(var(--spacing) * <number>); |
-mt-<number> | margin-top: calc(var(--spacing) * -<number>); |
mt-(<custom-property>) | margin-top: var(<custom-property>); |
mt-[<value>] | margin-top: <value>; |
mr-<number> | margin-right: calc(var(--spacing) * <number>); |
-mr-<number> | margin-right: calc(var(--spacing) * -<number>); |
mr-(<custom-property>) | margin-right: var(<custom-property>); |
mr-[<value>] | margin-right: <value>; |
mb-<number> | margin-bottom: calc(var(--spacing) * <number>); |
-mb-<number> | margin-bottom: calc(var(--spacing) * -<number>); |
mb-(<custom-property>) | margin-bottom: var(<custom-property>); |
mb-[<value>] | margin-bottom: <value>; |
ml-<number> | margin-left: calc(var(--spacing) * <number>); |
-ml-<number> | margin-left: calc(var(--spacing) * -<number>); |
ml-(<custom-property>) | margin-left: var(<custom-property>); |
ml-[<value>] | margin-left: <value>; |
space-x-<number> | & > :not(:last-child) {
margin-inline-start: calc(var(--spacing) * <number>);
margin-inline-end: calc(var(--spacing) * <number>);
}; |
-space-x-<number> | & > :not(:last-child) {
margin-inline-start: calc(var(--spacing) * -<number>);
margin-inline-end: calc(var(--spacing) * -<number>);
}; |
space-x-(<custom-property>) | & > :not(:last-child) {
margin-inline-start: <custom-property>;
margin-inline-end: <custom-property>);
}; |
space-x-[<value>] | & > :not(:last-child) {
margin-inline-start: <value>;
margin-inline-end: <value>);
}; |
space-y-<number> | & > :not(:last-child) {
margin-block-start: calc(var(--spacing) * <number>);
margin-block-end: calc(var(--spacing) * <number>);
}; |
-space-y-<number> | & > :not(:last-child) {
margin-block-start: calc(var(--spacing) * -<number>);
margin-block-end: calc(var(--spacing) * -<number>);
}; |
space-y-(<custom-property>) | & > :not(:last-child) {
margin-block-start: <custom-property>;
margin-block-end: <custom-property>);
}; |
space-y-[<value>] | & > :not(:last-child) {
margin-block-start: <value>;
margin-block-end: <value>);
}; |
space-x-reverse | & > :not(:last-child)) {
--tw-space-x-reverse: 1;
} |
space-y-reverse | & > :not(:last-child)) {
--tw-space-y-reverse: 1;
} |
Use m-<number>
utilities like m-4
and m-8
to control the margin on all sides of an element:
Use mt-<number>
, mr-<number>
, mb-<number>
, and ml-<number>
utilities like ml-2
and mt-6
to control the margin on one side of an element:
Use mx-<number>
utilities like mx-4
and mx-8
to control the horizontal margin of an element:
Use my-<number>
utilities like my-4
and my-8
to control the vertical margin of an element:
To use a negative margin value, prefix the class name with a dash to convert it to a negative value:
Use ms-<number>
and me-<number>
utilities like ms-4
and me-8
to set the margin-inline-start
and margin-inline-end
logical properties:
Use space-x-<number>
and space-y-<number>
utilities like space-x-4
and space-y-8
to control the space between elements:
If your elements are in reverse order (using say flex-row-reverse
or flex-col-reverse
), use the space-x-reverse
or space-y-reverse
utilities to ensure the space is added to the correct side of each element:
The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.
For those situations, it's better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.
Additionally, the space utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.
Use utilities like m-[<value>]
,mx-[<value>]
, and mb-[<value>]
to set the margin based on a completely custom value:
<div class="m-[5px] ..."> <!-- ... --></div>
For CSS variables, you can also use the m-(<custom-property>)
syntax:
<div class="m-(--my-margin) ..."> <!-- ... --></div>
This is just a shorthand for m-[var(<custom-property>)]
that adds the var()
function for you automatically.
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.
The m-<number>
,mx-<number>
,my-<number>
,ms-<number>
,me-<number>
,mt-<number>
,mr-<number>
,mb-<number>
, and ml-<number>
utilities are driven by the --spacing
theme variable, which can be customized in your own theme:
@theme { --spacing: 1px; }
Learn more about customizing the spacing scale in the theme variable documentation.