Spacing

Stacks provides atomic classes to override margin and padding.

Margin

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.

Margin class abbreviations

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

Margin classes

<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`	-	-

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

Auto margin classes

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

Padding

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.

Padding class abbreviations

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)

Padding classes

<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`	-	-

Edit on GitHub