#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

#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

New

0.6.3

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.

Cirrus