#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.

ClassStyles

#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>