![](../../dist-assets/images/egret.png)
Spacing
Where property
is one of:
m
- for classes that setmargin
p
- for classes that setpadding
Where sides
is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
l
- for classes that setmargin-left
orpadding-left
r
- for classes that setmargin-right
orpadding-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
on all 4 sides of the element
Where size
is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
xxxs
- (by default) for classes that set themargin
orpadding
to.0625rem
xxs
- (by default) for classes that set themargin
orpadding
to.125rem
xs
- (by default) for classes that set themargin
orpadding
to.25rem
sm
- (by default) for classes that set themargin
orpadding
to.5rem
md
- (by default) for classes that set themargin
orpadding
to1rem
lg
- (by default) for classes that set themargin
orpadding
to1.5rem
xl
- (by default) for classes that set themargin
orpadding
to2rem
xxl
- (by default) for classes that set themargin
orpadding
to2.5rem
xxxl
- (by default) for classes that set themargin
orpadding
to3rem
auto
- for classes that set themargin
to auto
Negative margins
-xxxs
- (by default) for classes that set themargin
to-.0625rem
-xxs
- (by default) for classes that set themargin
to-.125rem
-xs
- (by default) for classes that set themargin
to-.25rem
-sm
- (by default) for classes that set themargin
to-.5rem
-md
- (by default) for classes that set themargin
to-1rem
-lg
- (by default) for classes that set themargin
to-1.5rem
-xl
- (by default) for classes that set themargin
to-2rem
-xxl
- (by default) for classes that set themargin
to-2.5rem
-xxxl
- (by default) for classes that set themargin
to-3rem
Examples
Positive margin right
Negative margin right
Positive margin bottom
Negative margin bottom
<div class="mr-xl"> Margin Right 2rem </div>
Lorem ipsum dolor sit amet
<div class="mr--md"> Margin Right -1rem </div>
Lorem ipsum dolor sit amet
<div class="mb-md"> Margin Bottom 1rem </div>
Lorem ipsum dolor sit amet
<div class="mb--sm"> Margin Bottom -.5rem </div>
Lorem ipsum dolor sit amet
Margin auto
<div class="md--md"> Margin Left & Right auto </div>