Stacks

Base

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.

Abbreviations

Section titled Abbreviations

Abbreviation	Property	Responsive?
m	margin
mt	margin-top
mr	margin-right
mb	margin-bottom
ml	margin-left
mx	margin x-axis
my	margin y-axis

Base examples

Section titled Base examples

<div class="mt8 mr4 mb32 ml64">
    …
</div>

Example div with different margins applied

Base classes

Section titled Base classes

	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	`.mx0`	`.mx1`	`.mx2`	`.mx4`	`.mx6`	`.mx8`	`.mx12`	`.mx16`	`.mx24`	`.mx32`	`.mx48`	`.mx64`	`.mx96`	`.mx128`	`.mx50`	`.mx100`
my	`.my0`	`.my1`	`.my2`	`.my4`	`.my6`	`.my8`	`.my12`	`.my16`	`.my24`	`.my32`	`.my48`	`.my64`	`.my96`	`.my128`	`.my50`	`.my100`

Negative

Section titled Negative

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.

Abbreviations

Section titled Abbreviations

Abbreviation	Property	Responsive?
mn	margin
mtn	margin-top
mrn	margin-right
mbn	margin-bottom
mln	margin-left
mxn	margin x-axis
myn	margin y-axis

Negative examples

Section titled Negative examples

<div class="mt8 mr4 mb32 ml64">
    …
</div>

Example div with different margins applied

Negative classes

Section titled Negative classes

	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`	`.mxn50`	`.mxn100`
myn	`.myn1`	`.myn2`	`.myn4`	`.myn6`	`.myn8`	`.myn12`	`.myn16`	`.myn24`	`.myn32`	`.myn48`	`.myn64`	`.myn96`	`.myn128`	`.myn50`	`.myn100`

Auto

Section titled Auto

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.

Auto classes

Section titled Auto classes

Class	Property
.m-auto	margin
.mt-auto	margin-top
.mr-auto	margin-right
.mb-auto	margin-bottom
.ml-auto	margin-left
.mx-auto	margin x-axis
.my-auto	margin y-axis

Margin

Base

Abbreviations

Base examples

Base classes

Negative

Abbreviations

Negative examples

Negative classes

Auto

Auto classes