Margin

Utilities for margin.

Using ma-[number], you can control the element's margin from all sides.

ma-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "ma-5" will give you a margin of 1.25rem.
→
You can use Arbitrary values like "ma-(16px)" or "ma-(2em)" as well.
Learn more about Arbitrary Styling

Margin Top

Using mt-[number], you can control the element's margin from above.

mt-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "mt-5" will give you a margin-top of 1.25rem.
→
To use negative values simply add a "-" before the utility name,
such as "-mt-4".
→
You can use Arbitrary values like "mt-(16px)" or "mt-(2em)" as well.
Learn more about Arbitrary Styling

Margin Right

Using mr-[number], you can control the element's margin from its right side.

mr-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "mr-5" will give you a margin-right of 1.25rem.
→
To use negative values simply add a "-" before the utility name,
such as "-mr-4".
→
You can use Arbitrary values like "mr-(16px)" or "mr-(2em)" as well.
Learn more about Arbitrary Styling

Margin Bottom

Using mb-[number], you can control the element's margin from below.

mb-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "mb-5" will give you a margin-bottom of 1.25rem.
→
To use negative values simply add a "-" before the utility name,
such as "-mb-4".
→
You can use Arbitrary values like "mb-(16px)" or "mb-(2em)" as well.
Learn more about Arbitrary Styling

Margin Left

Using ml-[number], you can control the element's margin from its left side.

ml-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "ml-5" will give you a margin-left of 1.25rem.
→
To use negative values simply add a "-" before the utility name,
such as "-ml-4".
→
You can use Arbitrary values like "ml-(16px)" or "ml-(2em)" as well.
Learn more about Arbitrary Styling

Margin X (Horizontal)

Using mx-[number], you can control the element's margin from its horizontal axis.

mx-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "mx-5" will give you a horizontal margin of 1.25rem.
→
You can use Arbitrary values like "mx-(16px)" or "mx-(2em)" as well.
Learn more about Arbitrary Styling

Margin Y (Vertical)

Using my-[number], you can control the element's margin from its vertical axis.

my-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "my-5" will give you a vertical margin of 1.25rem.
→
You can use Arbitrary values like "my-(16px)" or "my-(2em)" as well.
Learn more about Arbitrary Styling

Margin Inline Start

Using ms-[number], you can control the element's margin from left or right side based on the text direction.

ms-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "ms-5" will give you a margin-inline-start of 1.25rem.
→
To use negative values simply add a "-" before the utility name,
such as "-ms-4".
→
You can use Arbitrary values like "ms-(16px)" or "ms-(2em)" as well.
Learn more about Arbitrary Styling

Margin Inline End

Using me-[number], you can control the element's margin from left or right side based on the text direction.

me-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "ms-5" will give you a margin-inline-end of 1.25rem.
→
To use negative values simply add a "-" before the utility name,
such as "-me-4".
→
You can use Arbitrary values like "me-(16px)" or "me-(2em)" as well.
Learn more about Arbitrary Styling