#Margin
These are utility classes used to add margins for any element.
#Sizes
These are the different sizes supported for margins. Note that all calculations are based around 0.5rem or 8px.
| Class | Styles |
|---|---|
m-0 | |
m-1 | |
m-2 | |
m-3 | |
m-4 | |
m-5 | |
m-6 | |
m-8 | |
m-10 | |
m-12 | |
m-16 | |
m-20 | |
m-24 | |
m-32 | |
mx-0 | |
mx-1 | |
mx-2 | |
mx-3 | |
mx-4 | |
mx-5 | |
mx-6 | |
mx-8 | |
mx-10 | |
mx-12 | |
mx-16 | |
mx-20 | |
mx-24 | |
mx-32 | |
my-0 | |
my-1 | |
my-2 | |
my-3 | |
my-4 | |
my-5 | |
my-6 | |
my-8 | |
my-10 | |
my-12 | |
my-16 | |
my-20 | |
my-24 | |
my-32 | |
mt-0 | |
mt-1 | |
mt-2 | |
mt-3 | |
mt-4 | |
mt-5 | |
mt-6 | |
mt-8 | |
mt-10 | |
mt-12 | |
mt-16 | |
mt-20 | |
mt-24 | |
mt-32 | |
mb-0 | |
mb-1 | |
mb-2 | |
mb-3 | |
mb-4 | |
mb-5 | |
mb-6 | |
mb-8 | |
mb-10 | |
mb-12 | |
mb-16 | |
mb-20 | |
mb-24 | |
mb-32 | |
ml-0 | |
ml-1 | |
ml-2 | |
ml-3 | |
ml-4 | |
ml-5 | |
ml-6 | |
ml-8 | |
ml-10 | |
ml-12 | |
ml-16 | |
ml-20 | |
ml-24 | |
ml-32 | |
mr-0 | |
mr-1 | |
mr-2 | |
mr-3 | |
mr-4 | |
mr-5 | |
mr-6 | |
mr-8 | |
mr-10 | |
mr-12 | |
mr-16 | |
mr-20 | |
mr-24 | |
mr-32 | |
#All Sides
Add a margin on all sides of an element using the m-<size> class.
m-4
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 m-4 white">m-4</span></div>#Both Sides
Add a margin to either left and right or top and bottom with the mx-<size> and my-<size> classes respectively.
mx-4
my-4
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 mx-4 white">mx-4</span></div>
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 my-4 white">my-4</span></div>#Single Side
For adding a margin for only a single side, the class follows a convention like m<l|r|t|b>-<size>.
ml-4
mr-4
mt-4
mb-4
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 ml-4 white">ml-4</span></div>
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 mr-4 white">mr-4</span></div>
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 mt-4 white">mt-4</span></div>
<div class="bg-indigo-200 u-inline-flex"><span class="bg-indigo-500 p-1 mb-4 white">mb-4</span></div>#Responsive
The margin classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use m-3-md to apply m-3 on medium screens and above.
<div class="mr-1 mr-5-sm mr-10-md">
<!-- ... -->
</div>Try out the example below yourself by resizing your browser window.
Shrink
Window
<div class="bg-orange-100 p-2 u-round u-flex u-justify-center u-items-center">
<p class="bg-orange-300 p-3 u-round my-1 mr-1 mr-5-sm mr-10-md">Shrink</p>
<p class="bg-orange-300 p-3 u-round my-1 ml-1 ml-5-sm ml-10-md">Window</p>
</div>For more information, visit the Viewports documentation.