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