#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 |
|---|---|
m-px | |
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 | |
m-48 | |
m-64 | |
mx-px | |
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 | |
mx-48 | |
mx-64 | |
my-px | |
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 | |
my-48 | |
my-64 | |
mt-px | |
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 | |
mt-48 | |
mt-64 | |
mb-px | |
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 | |
mb-48 | |
mb-64 | |
ml-px | |
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 | |
ml-48 | |
ml-64 | |
mr-px | |
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 | |
mr-48 | |
mr-64 | |
#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
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
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.