#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. You can also modify it to use a different base size other than 0.5rem within _config.scss -- see Variants below.

Class	Styles

#All Sides

Add a margin on all sides of an element using the m-<size> class.

m-4

<div class="bg-indigo-100 u-inline-flex u-round-xs text-white"><span class="bg-indigo-500 p-1 m-4 text-white u-round-xs u-shadow-lg">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="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mx-4 text-white u-round-xs u-shadow-lg">mx-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 my-4 text-white u-round-xs u-shadow-lg">my-4</span>
    </div>
</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="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 ml-4 text-white u-round-xs u-shadow-lg">ml-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mr-4 text-white u-round-xs u-shadow-lg">mr-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mt-4 text-white u-round-xs u-shadow-lg">mt-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mb-4 text-white u-round-xs u-shadow-lg">mb-4</span>
    </div>
</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-xs u-flex u-justify-center u-items-center">
    <p class="bg-orange-400 p-3 u-round-xs my-1 mr-1 mr-5-sm mr-10-md u-shadow-lg">Shrink</p>
    <p class="bg-orange-400 p-3 u-round-xs my-1 ml-1 ml-5-sm ml-10-md u-shadow-lg">Window</p>
</div>

For more information, visit the Viewports documentation.

#Variants

New

0.7.0

The classes specified above are the default utility classes for setting margins. You can add, change, or remove classes within the _config.scss file of Cirrus. The generated values are dependent on the values set for the base-size and steps fields in the config.

Below is an example of what gets generated when the base-size is set to 1rem and we add 64 to the list of steps.

Recall that these configs are merged with the $default-config map.

// _config.scss
$config: (
    extend: (
        sizing-system: (
            base-size: 1rem,
            steps: (64)
        )
    )
) !default;

This would generate the following classes.

:root {
    --space-size: 1rem;
}
.m-0 {
    margin: calc(var(--space-size) * 0) !important;
}
/* ... */
.m-64 {
    margin: calc(var(--space-size) * 64) !important;
}
/* Other viewport variants for margin... */

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.

Cirrus