GitHub
Edit

Margin

Stacks provides atomic classes to override margin.

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

AbbreviationPropertyResponsive?
mmarginYes
mtmargin-topYes
mrmargin-rightYes
mbmargin-bottomYes
mlmargin-leftYes
mxmargin x-axisYes
mymargin y-axisYes

Base examples

<div class="mt8 mr4 mb32 ml64">…</div>
Example div with different margins applied

Base classes

ClassOutput
.m0margin: 0
.m1margin: 1px
.m2margin: 2px
.m4margin: 4px
.m6margin: 6px
.m8margin: 8px
.m12margin: 12px
.m16margin: 16px
.m24margin: 24px
.m32margin: 32px
.m48margin: 48px
.m64margin: 64px
.m96margin: 96px
.m128margin: 128px
.m50margin: 50%
.m100margin: 100%
.mt0margin-top: 0
.mt1margin-top: 1px
.mt2margin-top: 2px
.mt4margin-top: 4px
.mt6margin-top: 6px
.mt8margin-top: 8px
.mt12margin-top: 12px
.mt16margin-top: 16px
.mt24margin-top: 24px
.mt32margin-top: 32px
.mt48margin-top: 48px
.mt64margin-top: 64px
.mt96margin-top: 96px
.mt128margin-top: 128px
.mt50margin-top: 50%
.mt100margin-top: 100%
.mr0margin-right: 0
.mr1margin-right: 1px
.mr2margin-right: 2px
.mr4margin-right: 4px
.mr6margin-right: 6px
.mr8margin-right: 8px
.mr12margin-right: 12px
.mr16margin-right: 16px
.mr24margin-right: 24px
.mr32margin-right: 32px
.mr48margin-right: 48px
.mr64margin-right: 64px
.mr96margin-right: 96px
.mr128margin-right: 128px
.mr50margin-right: 50%
.mr100margin-right: 100%
.mb0margin-bottom: 0
.mb1margin-bottom: 1px
.mb2margin-bottom: 2px
.mb4margin-bottom: 4px
.mb6margin-bottom: 6px
.mb8margin-bottom: 8px
.mb12margin-bottom: 12px
.mb16margin-bottom: 16px
.mb24margin-bottom: 24px
.mb32margin-bottom: 32px
.mb48margin-bottom: 48px
.mb64margin-bottom: 64px
.mb96margin-bottom: 96px
.mb128margin-bottom: 128px
.mb50margin-bottom: 50%
.mb100margin-bottom: 100%
.ml0margin-left: 0
.ml1margin-left: 1px
.ml2margin-left: 2px
.ml4margin-left: 4px
.ml6margin-left: 6px
.ml8margin-left: 8px
.ml12margin-left: 12px
.ml16margin-left: 16px
.ml24margin-left: 24px
.ml32margin-left: 32px
.ml48margin-left: 48px
.ml64margin-left: 64px
.ml96margin-left: 96px
.ml128margin-left: 128px
.ml50margin-left: 50%
.ml100margin-left: 100%
.mx0margin-left: 0; margin-right: 0
.mx1margin-left: 1px; margin-right: 1px
.mx2margin-left: 2px; margin-right: 2px
.mx4margin-left: 4px; margin-right: 4px
.mx6margin-left: 6px; margin-right: 6px
.mx8margin-left: 8px; margin-right: 8px
.mx12margin-left: 12px; margin-right: 12px
.mx16margin-left: 16px; margin-right: 16px
.mx24margin-left: 24px; margin-right: 24px
.mx32margin-left: 32px; margin-right: 32px
.mx48margin-left: 48px; margin-right: 48px
.mx64margin-left: 64px; margin-right: 64px
.mx96margin-left: 96px; margin-right: 96px
.mx128margin-left: 128px; margin-right: 128px
.mx50margin-left: 50%; margin-right: 50%
.mx100margin-left: 100%; margin-right: 100%
.my0margin-top: 0; margin-bottom: 0
.my1margin-top: 1px; margin-bottom: 1px
.my2margin-top: 2px; margin-bottom: 2px
.my4margin-top: 4px; margin-bottom: 4px
.my6margin-top: 6px; margin-bottom: 6px
.my8margin-top: 8px; margin-bottom: 8px
.my12margin-top: 12px; margin-bottom: 12px
.my16margin-top: 16px; margin-bottom: 16px
.my24margin-top: 24px; margin-bottom: 24px
.my32margin-top: 32px; margin-bottom: 32px
.my48margin-top: 48px; margin-bottom: 48px
.my64margin-top: 64px; margin-bottom: 64px
.my96margin-top: 96px; margin-bottom: 96px
.my128margin-top: 128px; margin-bottom: 128px
.my50margin-top: 50%; margin-bottom: 50%
.my100margin-top: 100%; margin-bottom: 100%

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

AbbreviationPropertyResponsive?
mnmarginYes
mtnmargin-topYes
mrnmargin-rightYes
mbnmargin-bottomYes
mlnmargin-leftYes
mxnmargin x-axisYes
mynmargin y-axisYes

Negative examples

<div class="mtn8 mrn4 mbn32 mln64">…</div>
Example div with different margins applied

Negative classes

ClassOutput
.mn1margin: -1px
.mn2margin: -2px
.mn4margin: -4px
.mn6margin: -6px
.mn8margin: -8px
.mn12margin: -12px
.mn16margin: -16px
.mn24margin: -24px
.mn32margin: -32px
.mn48margin: -48px
.mn64margin: -64px
.mn96margin: -96px
.mn128margin: -128px
.mn50margin: -50%
.mn100margin: -100%
.mtn1margin-top: -1px
.mtn2margin-top: -2px
.mtn4margin-top: -4px
.mtn6margin-top: -6px
.mtn8margin-top: -8px
.mtn12margin-top: -12px
.mtn16margin-top: -16px
.mtn24margin-top: -24px
.mtn32margin-top: -32px
.mtn48margin-top: -48px
.mtn64margin-top: -64px
.mtn96margin-top: -96px
.mtn128margin-top: -128px
.mtn50margin-top: -50%
.mtn100margin-top: -100%
.mrn1margin-right: -1px
.mrn2margin-right: -2px
.mrn4margin-right: -4px
.mrn6margin-right: -6px
.mrn8margin-right: -8px
.mrn12margin-right: -12px
.mrn16margin-right: -16px
.mrn24margin-right: -24px
.mrn32margin-right: -32px
.mrn48margin-right: -48px
.mrn64margin-right: -64px
.mrn96margin-right: -96px
.mrn128margin-right: -128px
.mrn50margin-right: -50%
.mrn100margin-right: -100%
.mbn1margin-bottom: -1px
.mbn2margin-bottom: -2px
.mbn4margin-bottom: -4px
.mbn6margin-bottom: -6px
.mbn8margin-bottom: -8px
.mbn12margin-bottom: -12px
.mbn16margin-bottom: -16px
.mbn24margin-bottom: -24px
.mbn32margin-bottom: -32px
.mbn48margin-bottom: -48px
.mbn64margin-bottom: -64px
.mbn96margin-bottom: -96px
.mbn128margin-bottom: -128px
.mbn50margin-bottom: -50%
.mbn100margin-bottom: -100%
.mln1margin-left: -1px
.mln2margin-left: -2px
.mln4margin-left: -4px
.mln6margin-left: -6px
.mln8margin-left: -8px
.mln12margin-left: -12px
.mln16margin-left: -16px
.mln24margin-left: -24px
.mln32margin-left: -32px
.mln48margin-left: -48px
.mln64margin-left: -64px
.mln96margin-left: -96px
.mln128margin-left: -128px
.mln50margin-left: -50%
.mln100margin-left: -100%
.mxn1margin-left: -1px; margin-right: -1px
.mxn2margin-left: -2px; margin-right: -2px
.mxn4margin-left: -4px; margin-right: -4px
.mxn6margin-left: -6px; margin-right: -6px
.mxn8margin-left: -8px; margin-right: -8px
.mxn12margin-left: -12px; margin-right: -12px
.mxn16margin-left: -16px; margin-right: -16px
.mxn24margin-left: -24px; margin-right: -24px
.mxn32margin-left: -32px; margin-right: -32px
.mxn48margin-left: -48px; margin-right: -48px
.mxn64margin-left: -64px; margin-right: -64px
.mxn96margin-left: -96px; margin-right: -96px
.mxn128margin-left: -128px; margin-right: -128px
.mxn50margin-left: -50%; margin-right: -50%
.mxn100margin-left: -100%; margin-right: -100%
.myn1margin-top: -1px; margin-bottom: -1px
.myn2margin-top: -2px; margin-bottom: -2px
.myn4margin-top: -4px; margin-bottom: -4px
.myn6margin-top: -6px; margin-bottom: -6px
.myn8margin-top: -8px; margin-bottom: -8px
.myn12margin-top: -12px; margin-bottom: -12px
.myn16margin-top: -16px; margin-bottom: -16px
.myn24margin-top: -24px; margin-bottom: -24px
.myn32margin-top: -32px; margin-bottom: -32px
.myn48margin-top: -48px; margin-bottom: -48px
.myn64margin-top: -64px; margin-bottom: -64px
.myn96margin-top: -96px; margin-bottom: -96px
.myn128margin-top: -128px; margin-bottom: -128px
.myn50margin-top: -50%; margin-bottom: -50%
.myn100margin-top: -100%; margin-bottom: -100%

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

ClassOutput
.m-automargin: auto
.mt-automargin-top: auto
.mr-automargin-right: auto
.mb-automargin-bottom: auto
.ml-automargin-left: auto
.mx-automargin-left: auto; margin-right: auto
.my-automargin-top: auto; margin-bottom: auto
© 2026 Stack Exchange Inc. All rights reserved.