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?
mmarginResponsive
mtmargin-topResponsive
mrmargin-rightResponsive
mbmargin-bottomResponsive
mlmargin-leftResponsive
mxmargin x-axisResponsive
mymargin y-axisResponsive

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?
mnmarginResponsive
mtnmargin-topResponsive
mrnmargin-rightResponsive
mbnmargin-bottomResponsive
mlnmargin-leftResponsive
mxnmargin x-axisResponsive
mynmargin y-axisResponsive

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.