Skip to main content

Spacing

Stacks provides atomic classes to override margin and padding.

Immutable margin utilities are based on our global white space scale. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.

Margin should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before use.

Abbreviation Definition Responsive?
m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin x-axis (left, right)
my margin y-axis (top, bottom)
mxn negative margin x-axis
myn negative margin y-axis
mtn negative margin-top
mrn negative margin-right
mbn negative margin-bottom
mln negative margin-left
<div class="mt8 mr4 mb32 ml64">

</div>
Example div with different margins applied
0 1px 2px 4px 6px 8px 12px 16px 24px 32px 48px 64px 96px 128px 50% 100%
m .m0 .m1 .m2 .m4 .m6 .m8 .m12 .m16 .m24 .m32 .m48 .m64 .m96 .m128 .m50 .m100
mt .mt0 .mt1 .mt2 .mt4 .mt6 .mt8 .mt12 .mt16 .mt24 .mt32 .mt48 .mt64 .mt96 .mt128 .mt50 .mt100
mr .mr0 .mr1 .mr2 .mr4 .mr6 .mr8 .mr12 .mr16 .mr24 .mr32 .mr48 .mr64 .mr96 .mr128 .mr50 .mr100
mb .mb0 .mb1 .mb2 .mb4 .mb6 .mb8 .mb12 .mb16 .mb24 .mb32 .mb48 .mb64 .mb96 .mb128 .mb50 .mb100
ml .ml0 .ml1 .ml2 .ml4 .ml6 .ml8 .ml12 .ml16 .ml24 .ml32 .ml48 .ml64 .ml96 .ml128 .ml50 .ml100
mx - .mx1 .mx2 .mx4 .mx6 .mx8 .mx12 .mx16 .mx24 .mx32 .mx48 .mx64 .mx96 .mx128 - -
my - .my1 .my2 .my4 .my6 .my8 .my12 .my16 .my24 .my32 .my48 .my64 .my96 .my128 - -
-1px -2px -4px -6px -8px -12px -16px -24px -32px -48px -64px -96px -128px -50% -100%
mn .mn1 .mn2 .mn4 .mn6 .mn8 .mn12 .mn16 .mn24 .mn32 .mn48 .mn64 .mn96 .mn128 .mn50 .mn100
mtn .mtn1 .mtn2 .mtn4 .mtn6 .mtn8 .mtn12 .mtn16 .mtn24 .mtn32 .mtn48 .mtn64 .mtn96 .mtn128 .mtn50 .mtn100
mrn .mrn1 .mrn2 .mrn4 .mrn6 .mrn8 .mrn12 .mrn16 .mrn24 .mrn32 .mrn48 .mrn64 .mrn96 .mrn128 .mrn50 .mrn100
mbn .mbn1 .mbn2 .mbn4 .mbn6 .mbn8 .mbn12 .mbn16 .mbn24 .mbn32 .mbn48 .mbn64 .mbn96 .mbn128 .mbn50 .mbn100
mln .mln1 .mln2 .mln4 .mln6 .mln8 .mln12 .mln16 .mln24 .mln32 .mln48 .mln64 .mln96 .mln128 .mln50 .mln100
mxn .mxn1 .mxn2 .mxn4 .mxn6 .mxn8 .mxn12 .mxn16 .mxn24 .mxn32 .mxn48 .mxn64 .mxn96 .mxn128 - -
myn .myn1 .myn2 .myn4 .myn6 .myn8 .myn12 .myn16 .myn24 .myn32 .myn48 .myn64 .myn96 .myn128 - -

Stacks provides additional automatic margin classes. These come in handy when positioning individual flex items within flex layouts, or horizontally centering a block-level element.

Direction Class
All directions .m-auto
Top .mt-auto
Right .mr-auto
Bottom .mb-auto
Left .ml-auto
X axis .mx-auto

Immutable padding utilities are based on a global white space scale defined with custom properties. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.

Padding should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before use.

Abbreviation Definition Responsive?
p padding
pt padding-top
pr padding-right
pb padding-bottom
pl padding-left
px padding x-axis (left, right)
py padding y-axis (top, bottom)
<div class="pt4 pr64 pb64 pl64">

</div>
Example div with different paddings applied
0 1px 2px 4px 6px 8px 12px 16px 24px 32px 48px 64px 96px 128px 50% 100%
p .p0 .p1 .p2 .p4 .p6 .p8 .p12 .p16 .p24 .p32 .p48 .p64 .p96 .p128 .p50 .p100
pt .pt0 .pt1 .pt2 .pt4 .pt6 .pt8 .pt12 .pt16 .pt24 .pt32 .pt48 .pt64 .pt96 .pt128 .pt50 .pt100
pr .pr0 .pr1 .pr2 .pr4 .pr6 .pr8 .pr12 .pr16 .pr24 .pr32 .pr48 .pr64 .pr96 .pr128 .pr50 .pr100
pb .pb0 .pb1 .pb2 .pb4 .pb6 .pb8 .pb12 .pb16 .pb24 .pb32 .pb48 .pb64 .pb96 .pb128 .pb50 .pb100
pl .pl0 .pl1 .pl2 .pl4 .pl6 .pl8 .pl12 .pl16 .pl24 .pl32 .pl48 .pl64 .pl96 .pl128 .pl50 .pl100
px - .px1 .px2 .px4 .px6 .px8 .px12 .px16 .px24 .px32 .px48 .px64 .px96 .px128 - -
py - .py1 .py2 .py4 .py6 .py8 .py12 .py16 .py24 .py32 .py48 .py64 .py96 .py128 - -
Deploys by Netlify