Margins

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

Starting in v5.9.0, Dialtone offers immutable margin classes, meaning they include an !important to override CSS specificity. If this level of specificity isn't desired, it is recommended to use the spacing variables in your CSS.

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.

Directional Margins

Margins can be added to an element by using a universal class (i.e. .d-m[#]) or by using a directional class (i.e. .d-m{t|r|b|l|y|x}[#]).

Classes

Class Deprecated Class Output
.d-m0 .d-m0 margin: 0 !important;
.d-m1 .d-m1 margin: .1rem !important;
.d-m2 .d-m2 margin: .2rem !important;
.d-m4 .d-m4 margin: .4rem !important;
.d-m6 .d-m6 margin: .6rem !important;
.d-m8 .d-m8 margin: .8rem !important;
.d-m12 .d-m12 margin: 1.2rem !important;
.d-m16 .d-m16 margin: 1.6rem !important;
.d-m24 .d-m24 margin: 2.4rem !important;
.d-m32 .d-m32 margin: 3.2rem !important;
.d-m48 .d-m48 margin: 4.8rem !important;
.d-m64 .d-m64 margin: 6.4rem !important;
.d-mt0 .d-m-top0 margin-top: 0 !important;
.d-mt1 .d-m-top1 margin-top: .1rem !important;
.d-mt2 .d-m-top2 margin-top: .2rem !important;
.d-mt4 .d-m-top4 margin-top: .4rem !important;
.d-mt6 .d-m-top6 margin-top: .6rem !important;
.d-mt8 .d-m-top8 margin-top: .8rem !important;
.d-mt12 .d-m-top12 margin-top: 1.2rem !important;
.d-mt16 .d-m-top16 margin-top: 1.6rem !important;
.d-mt24 .d-m-top24 margin-top: 2.4rem !important;
.d-mt32 .d-m-top32 margin-top: 3.2rem !important;
.d-mt48 .d-m-top48 margin-top: 4.8rem !important;
.d-mt64 .d-m-top64 margin-top: 6.4rem !important;
.d-mr0 .d-m-right0 margin-right: 0 !important;
.d-mr1 .d-m-right1 margin-right: .1rem !important;
.d-mr2 .d-m-right2 margin-right: .2rem !important;
.d-mr4 .d-m-right4 margin-right: .4rem !important;
.d-mr6 .d-m-right6 margin-right: .6rem !important;
.d-mr8 .d-m-right8 margin-right: .8rem !important;
.d-mr12 .d-m-right12 margin-right: 1.2rem !important;
.d-mr16 .d-m-right16 margin-right: 1.6rem !important;
.d-mr24 .d-m-right24 margin-right: 2.4rem !important;
.d-mr32 .d-m-right32 margin-right: 3.2rem !important;
.d-mr48 .d-m-right48 margin-right: 4.8rem !important;
.d-mr64 .d-m-right64 margin-right: 6.4rem !important;
.d-mb0 .d-m-bottom0 margin-bottom: 0 !important;
.d-mb1 .d-m-bottom1 margin-bottom: .1rem !important;
.d-mb2 .d-m-bottom2 margin-bottom: .2rem !important;
.d-mb4 .d-m-bottom4 margin-bottom: .4rem !important;
.d-mb6 .d-m-bottom6 margin-bottom: .6rem !important;
.d-mb8 .d-m-bottom8 margin-bottom: .8rem !important;
.d-mb12 .d-m-bottom12 margin-bottom: 1.2rem !important;
.d-mb16 .d-m-bottom16 margin-bottom: 1.6rem !important;
.d-mb24 .d-m-bottom24 margin-bottom: 2.4rem !important;
.d-mb32 .d-m-bottom32 margin-bottom: 3.2rem !important;
.d-mb48 .d-m-bottom48 margin-bottom: 4.8rem !important;
.d-mb64 .d-m-bottom64 margin-bottom: 6.4rem !important;
.d-ml0 .d-m-left0 margin-left: 0 !important;
.d-ml1 .d-m-left1 margin-left: .1rem !important;
.d-ml2 .d-m-left2 margin-left: .2rem !important;
.d-ml4 .d-m-left4 margin-left: .4rem !important;
.d-ml6 .d-m-left6 margin-left: .6rem !important;
.d-ml8 .d-m-left8 margin-left: .8rem !important;
.d-ml12 .d-m-left12 margin-left: 1.2rem !important;
.d-ml16 .d-m-left16 margin-left: 1.6rem !important;
.d-ml24 .d-m-left24 margin-left: 2.4rem !important;
.d-ml32 .d-m-left32 margin-left: 3.2rem !important;
.d-ml48 .d-m-left48 margin-left: 4.8rem !important;
.d-ml64 .d-m-left64 margin-left: 6.4rem !important;
.d-mx0 .d-m-x0 margin-right: 0 !important;
margin-left: 0 !important;
.d-mx1 .d-m-x1 margin-right: .1rem !important;
margin-left: .1rem !important;
.d-mx2 .d-m-x2 margin-right: .2rem !important;
margin-left: .2rem !important;
.d-mx4 .d-m-x4 margin-right: .4rem !important;
margin-left: .4rem !important;
.d-mx6 .d-m-x6 margin-right: .6rem !important;
margin-left: .6rem !important;
.d-mx8 .d-m-x8 margin-right: .8rem !important;
margin-left: .8rem !important;
.d-mx12 .d-m-x12 margin-right: 1.2rem !important;
margin-left: 1.2rem !important;
.d-mx16 .d-m-x16 margin-right: 1.6rem !important;
margin-left: 1.6rem !important;
.d-mx24 .d-m-x24 margin-right: 2.4rem !important;
margin-left: 2.4rem !important;
.d-mx32 .d-m-x32 margin-right: 3.2rem !important;
margin-left: 3.2rem !important;
.d-mx48 .d-m-x48 margin-right: 4.8rem !important;
margin-left: 4.8rem !important;
.d-mx64 .d-m-x64 margin-right: 6.4rem !important;
margin-left: 6.4rem !important;
.d-my0 .d-m-y0 margin-top: 0 !important;
margin-bottom: 0 !important;
.d-my1 .d-m-y1 margin-top: .1rem !important;
margin-bottom: .1rem !important;
.d-my2 .d-m-y2 margin-top: .2rem !important;
margin-bottom: .2rem !important;
.d-my4 .d-m-y4 margin-top: .4rem !important;
margin-bottom: .4rem !important;
.d-my6 .d-m-y6 margin-top: .6rem !important;
margin-bottom: .6rem !important;
.d-my8 .d-m-y8 margin-top: .8rem !important;
margin-bottom: .8rem !important;
.d-my12 .d-m-y12 margin-top: 1.2rem !important;
margin-bottom: 1.2rem !important;
.d-my16 .d-m-y16 margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
.d-my24 .d-m-y24 margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
.d-my32 .d-m-y32 margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
.d-my48 .d-m-y48 margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
.d-my64 .d-m-y64 margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;

Examples

.d-m8
.d-mt8
.d-mr8
.d-mb8
.d-ml8
.d-mx8
.d-my8
<div class="d-m8"></div>
<div class="d-mt8"></div>
<div class="d-mr8"></div>
<div class="d-mb8"></div>
<div class="d-ml8"></div>
<div class="d-mx8"></div>
<div class="d-my8"></div>

Negative Directional Margins

Negative margins can also be added to elements either by using a universal class (i.e. .d-mn[#]) or by using a directional class (i.e. .d-mn{t|r|b|l|y|x}[#]).

Classes

Class Deprecated Class Output
.d-mn0 .d-margin0--negative margin: -0 !important;
.d-mn1 .d-margin1--negative margin: -.1rem !important;
.d-mn2 .d-margin2--negative margin: -.2rem !important;
.d-mn4 .d-margin4--negative margin: -.4rem !important;
.d-mn6 .d-margin6--negative margin: -.6rem !important;
.d-mn8 .d-margin8--negative margin: -.8rem !important;
.d-mn12 .d-margin12--negative margin: -1.2rem !important;
.d-mn16 .d-margin16--negative margin: -1.6rem !important;
.d-mn24 .d-margin24--negative margin: -2.4rem !important;
.d-mn32 .d-margin32--negative margin: -3.2rem !important;
.d-mn48 .d-margin48--negative margin: -4.8rem !important;
.d-mn64 .d-margin64--negative margin: -6.4rem !important;
.d-mtn0 .d-margin-top0--negative margin-top: -0 !important;
.d-mtn1 .d-margin-top1--negative margin-top: -.1rem !important;
.d-mtn2 .d-margin-top2--negative margin-top: -.2rem !important;
.d-mtn4 .d-margin-top4--negative margin-top: -.4rem !important;
.d-mtn6 .d-margin-top6--negative margin-top: -.6rem !important;
.d-mtn8 .d-margin-top8--negative margin-top: -.8rem !important;
.d-mtn12 .d-margin-top12--negative margin-top: -1.2rem !important;
.d-mtn16 .d-margin-top16--negative margin-top: -1.6rem !important;
.d-mtn24 .d-margin-top24--negative margin-top: -2.4rem !important;
.d-mtn32 .d-margin-top32--negative margin-top: -3.2rem !important;
.d-mtn48 .d-margin-top48--negative margin-top: -4.8rem !important;
.d-mtn64 .d-margin-top64--negative margin-top: -6.4rem !important;
.d-mrn0 .d-margin-right0--negative margin-right: -0 !important;
.d-mrn1 .d-margin-right1--negative margin-right: -.1rem !important;
.d-mrn2 .d-margin-right2--negative margin-right: -.2rem !important;
.d-mrn4 .d-margin-right4--negative margin-right: -.4rem !important;
.d-mrn6 .d-margin-right6--negative margin-right: -.6rem !important;
.d-mrn8 .d-margin-right8--negative margin-right: -.8rem !important;
.d-mrn12 .d-margin-right12--negative margin-right: -1.2rem !important;
.d-mrn16 .d-margin-right16--negative margin-right: -1.6rem !important;
.d-mrn24 .d-margin-right24--negative margin-right: -2.4rem !important;
.d-mrn32 .d-margin-right32--negative margin-right: -3.2rem !important;
.d-mrn48 .d-margin-right48--negative margin-right: -4.8rem !important;
.d-mrn64 .d-margin-right64--negative margin-right: -6.4rem !important;
.d-mbn0 .d-margin-bottom0--negative margin-bottom: -0 !important;
.d-mbn1 .d-margin-bottom1--negative margin-bottom: -.1rem !important;
.d-mbn2 .d-margin-bottom2--negative margin-bottom: -.2rem !important;
.d-mbn4 .d-margin-bottom4--negative margin-bottom: -.4rem !important;
.d-mbn6 .d-margin-bottom6--negative margin-bottom: -.6rem !important;
.d-mbn8 .d-margin-bottom8--negative margin-bottom: -.8rem !important;
.d-mbn12 .d-margin-bottom12--negative margin-bottom: -1.2rem !important;
.d-mbn16 .d-margin-bottom16--negative margin-bottom: -1.6rem !important;
.d-mbn24 .d-margin-bottom24--negative margin-bottom: -2.4rem !important;
.d-mbn32 .d-margin-bottom32--negative margin-bottom: -3.2rem !important;
.d-mbn48 .d-margin-bottom48--negative margin-bottom: -4.8rem !important;
.d-mbn64 .d-margin-bottom64--negative margin-bottom: -6.4rem !important;
.d-mln0 .d-margin-left0--negative margin-left: -0 !important;
.d-mln1 .d-margin-left1--negative margin-left: -.1rem !important;
.d-mln2 .d-margin-left2--negative margin-left: -.2rem !important;
.d-mln4 .d-margin-left4--negative margin-left: -.4rem !important;
.d-mln6 .d-margin-left6--negative margin-left: -.6rem !important;
.d-mln8 .d-margin-left8--negative margin-left: -.8rem !important;
.d-mln12 .d-margin-left12--negative margin-left: -1.2rem !important;
.d-mln16 .d-margin-left16--negative margin-left: -1.6rem !important;
.d-mln24 .d-margin-left24--negative margin-left: -2.4rem !important;
.d-mln32 .d-margin-left32--negative margin-left: -3.2rem !important;
.d-mln48 .d-margin-left48--negative margin-left: -4.8rem !important;
.d-mln64 .d-margin-left64--negative margin-left: -6.4rem !important;
.d-mxn0 .d-margin-x0--negative margin-right: -0 !important;
margin-left: -0 !important;
.d-mxn1 .d-margin-x1--negative margin-right: -.1rem !important;
margin-left: -.1rem !important;
.d-mxn2 .d-margin-x2--negative margin-right: -.2rem !important;
margin-left: -.2rem !important;
.d-mxn4 .d-margin-x4--negative margin-right: -.4rem !important;
margin-left: -.4rem !important;
.d-mxn6 .d-margin-x6--negative margin-right: -.6rem !important;
margin-left: -.6rem !important;
.d-mxn8 .d-margin-x8--negative margin-right: -.8rem !important;
margin-left: -.8rem !important;
.d-mxn12 .d-margin-x12--negative margin-right: -1.2rem !important;
margin-left: -1.2rem !important;
.d-mxn16 .d-margin-x16--negative margin-right: -1.6rem !important;
margin-left: -1.6rem !important;
.d-mxn24 .d-margin-x24--negative margin-right: -2.4rem !important;
margin-left: -2.4rem !important;
.d-mxn32 .d-margin-x32--negative margin-right: -3.2rem !important;
margin-left: -3.2rem !important;
.d-mxn48 .d-margin-x48--negative margin-right: -4.8rem !important;
margin-left: -4.8rem !important;
.d-mxn64 .d-margin-x64--negative margin-right: -6.4rem !important;
margin-left: -6.4rem !important;
.d-myn0 .d-margin-y0--negative margin-top: -0 !important;
margin-bottom: -0 !important;
.d-myn1 .d-margin-y1--negative margin-top: -.1rem !important;
margin-bottom: -.1rem !important;
.d-myn2 .d-margin-y2--negative margin-top: -.2rem !important;
margin-bottom: -.2rem !important;
.d-myn4 .d-margin-y4--negative margin-top: -.4rem !important;
margin-bottom: -.4rem !important;
.d-myn6 .d-margin-y6--negative margin-top: -.6rem !important;
margin-bottom: -.6rem !important;
.d-myn8 .d-margin-y8--negative margin-top: -.8rem !important;
margin-bottom: -.8rem !important;
.d-myn12 .d-margin-y12--negative margin-top: -1.2rem !important;
margin-bottom: -1.2rem !important;
.d-myn16 .d-margin-y16--negative margin-top: -1.6rem !important;
margin-bottom: -1.6rem !important;
.d-myn24 .d-margin-y24--negative margin-top: -2.4rem !important;
margin-bottom: -2.4rem !important;
.d-myn32 .d-margin-y32--negative margin-top: -3.2rem !important;
margin-bottom: -3.2rem !important;
.d-myn48 .d-margin-y48--negative margin-top: -4.8rem !important;
margin-bottom: -4.8rem !important;
.d-myn64 .d-margin-y64--negative margin-top: -6.4rem !important;
margin-bottom: -6.4rem !important;

Examples

.d-mn8
.d-mtn8
.d-mrn8
.d-mbn8
.d-mln8
.d-mxn8
.d-myn8
<div class="d-mn8"></div>
<div class="d-mtn8"></div>
<div class="d-mrn8"></div>
<div class="d-mbn8"></div>
<div class="d-mln8"></div>
<div class="d-mxn8"></div>
<div class="d-myn8"></div>

Auto Margins

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

Classes

Class Deprecated Class Output
.d-m--auto .d-m64--auto margin: auto !important;
.d-mt-auto .d-m-top64--auto margin-top: auto !important;
.d-mr-auto .d-m-right64--auto margin-right: auto !important;
.d-mb-auto .d-m-bottom64--auto margin-bottom: auto !important;
.d-ml-auto .d-m-left64--auto margin-left: auto !important;
.d-mx-auto .d-m-x64--auto margin-right: auto !important;
margin-left: auto !important;
.d-my-auto .d-m-y64--auto margin-top: auto !important;
margin-bottom: auto !important;

Example

.d-m--auto
.d-mt-auto
.d-mr-auto
.d-mb-auto
.d-ml-auto
.d-mx-auto
.d-my-auto
<div class="d-m--auto"></div>
<div class="d-mt-auto"></div>
<div class="d-mr-auto"></div>
<div class="d-mb-auto"></div>
<div class="d-ml-auto"></div>
<div class="d-mx-auto"></div>
<div class="d-my-auto"></div>

Reset Margins

Unsetting margins resets an element's margin to its initial value.

Class Output
.d-m-unset margin: unset !important;
.d-mt-unset margin-top: unset !important;
.d-mr-unset margin-right: unset !important;
.d-mb-unset margin-bottom: unset !important;
.d-ml-unset margin-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;