Sections

Margin

Utilities for controlling an element’s margin.

Class Properties
.m-0 margin: 0;
.m-1 margin: .25rem;
.m-2 margin: .5rem;
.m-3 margin: .75rem;
.m-4 margin: 1rem;
.m-5 margin: 1.5rem;
.m-6 margin: 2rem;
.m-7 margin: 3rem;
.m-8 margin: 4rem;
.m-9 margin: 6rem;

Usage

All sides

Use .m-{size} to apply margin on all sides of an element.

.m-4

.m-6

.m-8

<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 m-4"></div>
</div>
<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 m-6"></div>
</div>
<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 m-8"></div>
</div>

Specific sides

Use .m{t|r|b|l}-{size} to apply margin on a single side of an element.

.ml-4

.mr-4

.mb-4

<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 ml-4"></div>
</div>
<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 mr-4"></div>
</div>
<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 mb-4"></div>
</div>

Use .mx-{size} to apply margin on the left and right (horizontal) sides of an element.

Use .my-{size} to apply margin on the top and bottom (vertical) sides of an element.

.mx-4

.my-4

<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 mx-4"></div>
</div>
<div class="inline-block bg-gray-200">
  <div class="bg-gray-400 my-4"></div>
</div>

Negative margin

Use .-m{side?}-{size} to apply negative margin.

.mx-4

<div class="p-4 bg-gray-200 w-8"></div>
<div class="p-4 bg-gray-400 w-6 -mt-4"></div>

Variants

By default, only responsive variants are generated for margin utilities.

Responsive

To control the margin for an element at a specific breakpoint, add a {screen}: prefix to any existing margin utility.

For example, use .md:p-4 to apply the p-4 utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:p-4, add "margin" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "margin",
);