| 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; |
.-mt-1px | margin-top: -1px; |
.-mb-1px | margin-bottom: -1px; |
Usage
All sides
Use .m-{size} to apply margin on all sides of an element.
<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.
<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.
<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.
<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",
);