Dialtone

Margins

Utilities to adjust an element's exterior spacing between other objects.

Classes

Margins can be added to an element by using a utility class (i.e. .d-m[#]) or by using a directional class (i.e. .d-m{t|r|b|l|y|x}[#]). The margin utility classes help visually separate elements. Because layouts are highly contextual, margins are never applied natively to a component's outer wrapper. Instead you can use these margin classes to provide that space or the Stack and Flow layouts.

ClassOutput
.d-m0margin: 0 !important
.d-m1margin: .1rem !important
.d-m2margin: .2rem !important
.d-m4margin: .4rem !important
.d-m6margin: .6rem !important
.d-m8margin: .8rem !important
.d-m12margin: 1.2rem !important
.d-m16margin: 1.6rem !important
.d-m24margin: 2.4rem !important
.d-m32margin: 3.2rem !important
.d-m48margin: 4.8rem !important
.d-m64margin: 6.4rem !important
.d-m72margin: 7.2rem !important
.d-m84margin: 8.4rem !important
.d-m96margin: 9.6rem !important
.d-m102margin: 10.2rem !important
.d-m114margin: 11.4rem !important
.d-m128margin: 12.8rem !important
.d-mt0margin-top: 0 !important;
.d-mt1margin-top: .1rem !important;
.d-mt2margin-top: .2rem !important;
.d-mt4margin-top: .4rem !important;
.d-mt6margin-top: .6rem !important;
.d-mt8margin-top: .8rem !important;
.d-mt12margin-top: 1.2rem !important;
.d-mt16margin-top: 1.6rem !important;
.d-mt24margin-top: 2.4rem !important;
.d-mt32margin-top: 3.2rem !important;
.d-mt48margin-top: 4.8rem !important;
.d-mt64margin-top: 6.4rem !important;
.d-mt72margin-top: 7.2rem !important;
.d-mt84margin-top: 8.4rem !important;
.d-mt96margin-top: 9.6rem !important;
.d-mt102margin-top: 10.2rem !important;
.d-mt114margin-top: 11.4rem !important;
.d-mt128margin-top: 12.8rem !important;
.d-mr0margin-right: 0 !important;
.d-mr1margin-right: .1rem !important;
.d-mr2margin-right: .2rem !important;
.d-mr4margin-right: .4rem !important;
.d-mr6margin-right: .6rem !important;
.d-mr8margin-right: .8rem !important;
.d-mr12margin-right: 1.2rem !important;
.d-mr16margin-right: 1.6rem !important;
.d-mr24margin-right: 2.4rem !important;
.d-mr32margin-right: 3.2rem !important;
.d-mr48margin-right: 4.8rem !important;
.d-mr64margin-right: 6.4rem !important;
.d-mr72margin-right: 7.2rem !important;
.d-mr84margin-right: 8.4rem !important;
.d-mr96margin-right: 9.6rem !important;
.d-mr102margin-right: 10.2rem !important;
.d-mr114margin-right: 11.4rem !important;
.d-mr128margin-right: 12.8rem !important;
.d-mb0margin-bottom: 0 !important;
.d-mb1margin-bottom: .1rem !important;
.d-mb2margin-bottom: .2rem !important;
.d-mb4margin-bottom: .4rem !important;
.d-mb6margin-bottom: .6rem !important;
.d-mb8margin-bottom: .8rem !important;
.d-mb12margin-bottom: 1.2rem !important;
.d-mb16margin-bottom: 1.6rem !important;
.d-mb24margin-bottom: 2.4rem !important;
.d-mb32margin-bottom: 3.2rem !important;
.d-mb48margin-bottom: 4.8rem !important;
.d-mb64margin-bottom: 6.4rem !important;
.d-mb72margin-bottom: 7.2rem !important;
.d-mb84margin-bottom: 8.4rem !important;
.d-mb96margin-bottom: 9.6rem !important;
.d-mb102margin-bottom: 10.2rem !important;
.d-mb114margin-bottom: 11.4rem !important;
.d-mb128margin-bottom: 12.8rem !important;
.d-ml0margin-left: 0 !important;
.d-ml1margin-left: .1rem !important;
.d-ml2margin-left: .2rem !important;
.d-ml4margin-left: .4rem !important;
.d-ml6margin-left: .6rem !important;
.d-ml8margin-left: .8rem !important;
.d-ml12margin-left: 1.2rem !important;
.d-ml16margin-left: 1.6rem !important;
.d-ml24margin-left: 2.4rem !important;
.d-ml32margin-left: 3.2rem !important;
.d-ml48margin-left: 4.8rem !important;
.d-ml64margin-left: 6.4rem !important;
.d-ml72margin-left: 7.2rem !important;
.d-ml84margin-left: 8.4rem !important;
.d-ml96margin-left: 9.6rem !important;
.d-ml102margin-left: 10.2rem !important;
.d-ml114margin-left: 11.4rem !important;
.d-ml128margin-left: 12.8rem !important;
.d-mx0 margin-right: 0 !important;
margin-left: 0 !important;
.d-mx1 margin-right: .1rem !important;
margin-left: .1rem !important;
.d-mx2 margin-right: .2rem !important;
margin-left: .2rem !important;
.d-mx4 margin-right: .4rem !important;
margin-left: .4rem !important;
.d-mx6 margin-right: .6rem !important;
margin-left: .6rem !important;
.d-mx8 margin-right: .8rem !important;
margin-left: .8rem !important;
.d-mx12 margin-right: 1.2rem !important;
margin-left: 1.2rem !important;
.d-mx16 margin-right: 1.6rem !important;
margin-left: 1.6rem !important;
.d-mx24 margin-right: 2.4rem !important;
margin-left: 2.4rem !important;
.d-mx32 margin-right: 3.2rem !important;
margin-left: 3.2rem !important;
.d-mx48 margin-right: 4.8rem !important;
margin-left: 4.8rem !important;
.d-mx64 margin-right: 6.4rem !important;
margin-left: 6.4rem !important;
.d-mx72 margin-right: 7.2rem !important;
margin-left: 7.2rem !important;
.d-mx84 margin-right: 8.4rem !important;
margin-left: 8.4rem !important;
.d-mx96 margin-right: 9.6rem !important;
margin-left: 9.6rem !important;
.d-mx102 margin-right: 10.2rem !important;
margin-left: 10.2rem !important;
.d-mx114 margin-right: 11.4rem !important;
margin-left: 11.4rem !important;
.d-mx128 margin-right: 12.8rem !important;
margin-left: 12.8rem !important;
.d-my0 margin-top: 0 !important;
margin-bottom: 0 !important;
.d-my1 margin-top: .1rem !important;
margin-bottom: .1rem !important;
.d-my2 margin-top: .2rem !important;
margin-bottom: .2rem !important;
.d-my4 margin-top: .4rem !important;
margin-bottom: .4rem !important;
.d-my6 margin-top: .6rem !important;
margin-bottom: .6rem !important;
.d-my8 margin-top: .8rem !important;
margin-bottom: .8rem !important;
.d-my12 margin-top: 1.2rem !important;
margin-bottom: 1.2rem !important;
.d-my16 margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
.d-my24 margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
.d-my32 margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
.d-my48 margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
.d-my64 margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
.d-my72 margin-top: 7.2rem !important;
margin-bottom: 7.2rem !important;
.d-my84 margin-top: 8.4rem !important;
margin-bottom: 8.4rem !important;
.d-my96 margin-top: 9.6rem !important;
margin-bottom: 9.6rem !important;
.d-my102 margin-top: 10.2rem !important;
margin-bottom: 10.2rem !important;
.d-my114 margin-top: 11.4rem !important;
margin-bottom: 11.4rem !important;
.d-my128 margin-top: 12.8rem !important;
margin-bottom: 12.8rem !important;
.d-mn1margin: -.1rem !important
.d-mn2margin: -.2rem !important
.d-mn4margin: -.4rem !important
.d-mn6margin: -.6rem !important
.d-mn8margin: -.8rem !important
.d-mn12margin: -1.2rem !important
.d-mn16margin: -1.6rem !important
.d-mn24margin: -2.4rem !important
.d-mn32margin: -3.2rem !important
.d-mn48margin: -4.8rem !important
.d-mn64margin: -6.4rem !important
.d-mn72margin: -7.2rem !important
.d-mn84margin: -8.4rem !important
.d-mn96margin: -9.6rem !important
.d-mn102margin: -10.2rem !important
.d-mn114margin: -11.4rem !important
.d-mn128margin: -12.8rem !important
.d-mtn1margin-top: -.1rem !important;
.d-mtn2margin-top: -.2rem !important;
.d-mtn4margin-top: -.4rem !important;
.d-mtn6margin-top: -.6rem !important;
.d-mtn8margin-top: -.8rem !important;
.d-mtn12margin-top: -1.2rem !important;
.d-mtn16margin-top: -1.6rem !important;
.d-mtn24margin-top: -2.4rem !important;
.d-mtn32margin-top: -3.2rem !important;
.d-mtn48margin-top: -4.8rem !important;
.d-mtn64margin-top: -6.4rem !important;
.d-mtn72margin-top: -7.2rem !important;
.d-mtn84margin-top: -8.4rem !important;
.d-mtn96margin-top: -9.6rem !important;
.d-mtn102margin-top: -10.2rem !important;
.d-mtn114margin-top: -11.4rem !important;
.d-mtn128margin-top: -12.8rem !important;
.d-mrn1margin-right: -.1rem !important;
.d-mrn2margin-right: -.2rem !important;
.d-mrn4margin-right: -.4rem !important;
.d-mrn6margin-right: -.6rem !important;
.d-mrn8margin-right: -.8rem !important;
.d-mrn12margin-right: -1.2rem !important;
.d-mrn16margin-right: -1.6rem !important;
.d-mrn24margin-right: -2.4rem !important;
.d-mrn32margin-right: -3.2rem !important;
.d-mrn48margin-right: -4.8rem !important;
.d-mrn64margin-right: -6.4rem !important;
.d-mrn72margin-right: -7.2rem !important;
.d-mrn84margin-right: -8.4rem !important;
.d-mrn96margin-right: -9.6rem !important;
.d-mrn102margin-right: -10.2rem !important;
.d-mrn114margin-right: -11.4rem !important;
.d-mrn128margin-right: -12.8rem !important;
.d-mbn1margin-bottom: -.1rem !important;
.d-mbn2margin-bottom: -.2rem !important;
.d-mbn4margin-bottom: -.4rem !important;
.d-mbn6margin-bottom: -.6rem !important;
.d-mbn8margin-bottom: -.8rem !important;
.d-mbn12margin-bottom: -1.2rem !important;
.d-mbn16margin-bottom: -1.6rem !important;
.d-mbn24margin-bottom: -2.4rem !important;
.d-mbn32margin-bottom: -3.2rem !important;
.d-mbn48margin-bottom: -4.8rem !important;
.d-mbn64margin-bottom: -6.4rem !important;
.d-mbn72margin-bottom: -7.2rem !important;
.d-mbn84margin-bottom: -8.4rem !important;
.d-mbn96margin-bottom: -9.6rem !important;
.d-mbn102margin-bottom: -10.2rem !important;
.d-mbn114margin-bottom: -11.4rem !important;
.d-mbn128margin-bottom: -12.8rem !important;
.d-mln1margin-left: -.1rem !important;
.d-mln2margin-left: -.2rem !important;
.d-mln4margin-left: -.4rem !important;
.d-mln6margin-left: -.6rem !important;
.d-mln8margin-left: -.8rem !important;
.d-mln12margin-left: -1.2rem !important;
.d-mln16margin-left: -1.6rem !important;
.d-mln24margin-left: -2.4rem !important;
.d-mln32margin-left: -3.2rem !important;
.d-mln48margin-left: -4.8rem !important;
.d-mln64margin-left: -6.4rem !important;
.d-mln72margin-left: -7.2rem !important;
.d-mln84margin-left: -8.4rem !important;
.d-mln96margin-left: -9.6rem !important;
.d-mln102margin-left: -10.2rem !important;
.d-mln114margin-left: -11.4rem !important;
.d-mln128margin-left: -12.8rem !important;
.d-mxn1 margin-right: -.1rem !important;
margin-left: -.1rem !important;
.d-mxn2 margin-right: -.2rem !important;
margin-left: -.2rem !important;
.d-mxn4 margin-right: -.4rem !important;
margin-left: -.4rem !important;
.d-mxn6 margin-right: -.6rem !important;
margin-left: -.6rem !important;
.d-mxn8 margin-right: -.8rem !important;
margin-left: -.8rem !important;
.d-mxn12 margin-right: -1.2rem !important;
margin-left: -1.2rem !important;
.d-mxn16 margin-right: -1.6rem !important;
margin-left: -1.6rem !important;
.d-mxn24 margin-right: -2.4rem !important;
margin-left: -2.4rem !important;
.d-mxn32 margin-right: -3.2rem !important;
margin-left: -3.2rem !important;
.d-mxn48 margin-right: -4.8rem !important;
margin-left: -4.8rem !important;
.d-mxn64 margin-right: -6.4rem !important;
margin-left: -6.4rem !important;
.d-mxn72 margin-right: -7.2rem !important;
margin-left: -7.2rem !important;
.d-mxn84 margin-right: -8.4rem !important;
margin-left: -8.4rem !important;
.d-mxn96 margin-right: -9.6rem !important;
margin-left: -9.6rem !important;
.d-mxn102 margin-right: -10.2rem !important;
margin-left: -10.2rem !important;
.d-mxn114 margin-right: -11.4rem !important;
margin-left: -11.4rem !important;
.d-mxn128 margin-right: -12.8rem !important;
margin-left: -12.8rem !important;
.d-myn1 margin-top: -.1rem !important;
margin-bottom: -.1rem !important;
.d-myn2 margin-top: -.2rem !important;
margin-bottom: -.2rem !important;
.d-myn4 margin-top: -.4rem !important;
margin-bottom: -.4rem !important;
.d-myn6 margin-top: -.6rem !important;
margin-bottom: -.6rem !important;
.d-myn8 margin-top: -.8rem !important;
margin-bottom: -.8rem !important;
.d-myn12 margin-top: -1.2rem !important;
margin-bottom: -1.2rem !important;
.d-myn16 margin-top: -1.6rem !important;
margin-bottom: -1.6rem !important;
.d-myn24 margin-top: -2.4rem !important;
margin-bottom: -2.4rem !important;
.d-myn32 margin-top: -3.2rem !important;
margin-bottom: -3.2rem !important;
.d-myn48 margin-top: -4.8rem !important;
margin-bottom: -4.8rem !important;
.d-myn64 margin-top: -6.4rem !important;
margin-bottom: -6.4rem !important;
.d-myn72 margin-top: -7.2rem !important;
margin-bottom: -7.2rem !important;
.d-myn84 margin-top: -8.4rem !important;
margin-bottom: -8.4rem !important;
.d-myn96 margin-top: -9.6rem !important;
margin-bottom: -9.6rem !important;
.d-myn102 margin-top: -10.2rem !important;
margin-bottom: -10.2rem !important;
.d-myn114 margin-top: -11.4rem !important;
margin-bottom: -11.4rem !important;
.d-myn128 margin-top: -12.8rem !important;
margin-bottom: -12.8rem !important;
.d-m-automargin: auto !important
.d-mt-automargin-top: auto !important;
.d-mr-automargin-right: auto !important;
.d-mb-automargin-bottom: auto !important;
.d-ml-automargin-left: auto !important;
.d-mx-auto margin-right: auto !important;
margin-left: auto !important;
.d-my-auto margin-top: auto !important;
margin-bottom: auto !important;
.d-m-unsetmargin: unset !important
.d-mt-unsetmargin-top: unset !important;
.d-mr-unsetmargin-right: unset !important;
.d-mb-unsetmargin-bottom: unset !important;
.d-ml-unsetmargin-left: unset !important;
.d-mx-unset margin-right: unset !important;
margin-left: unset !important;
.d-my-unset margin-top: unset !important;
margin-bottom: unset !important;

Add margin to all sides

<div class="d-m24 ...">d-m24</div>

Add margin to a single side

<div class="d-mt12 ...">d-mt12</div>
<div class="d-mr16 ...">d-mr16</div>
<div class="d-mb24 ...">d-mb24</div>
<div class="d-ml32 ...">d-ml32</div>

Add horizontal margins

<div class="d-mx24 ...">d-mx24</div>

Add vertical margins

<div class="d-my24 ...">d-my24</div>

Auto margins

Auto margins allow an element to fill a remaining space within an object. This is especially useful in flex layouts.

<div class="d-mx-auto ...">d-mx-auto</div>
<div class="d-ml-auto ...">d-ml-auto</div>
<div class="d-mr-auto ...">d-mr-auto</div>
Last Updated: