Use d-m-{stop} to set margin using spacing token stops. The number references the spacing token (d-m-100 = --dt-spacing-100 = 8px). Logical property aliases are also available: d-mbs-{stop} (margin-block-start, aka top), d-mbe-{stop} (margin-block-end, aka bottom), d-mis-{stop} (margin-inline-start, aka left), d-mie-{stop} (margin-inline-end, aka right).
Add Margin to All Sides #
<div class="d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-m-300 d-bgc-moderate d-bar-300 d-code--md">d-m-300</dt-stack></div>
Add Margin to a Single Side #
<div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mbs-150 d-p-200 d-bgc-moderate d-bber-300 d-code--md">d-mbs-150</dt-stack></div> <div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mie-200 d-p-200 d-bgc-moderate d-bisr-300 d-code--md">d-mie-200</dt-stack></div> <div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mbe-300 d-p-200 d-bgc-moderate d-bbsr-300 d-code--md">d-mbe-300</dt-stack></div> <div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mis-400 d-p-200 d-bgc-moderate d-bier-300 d-code--md">d-mis-400</dt-stack></div>
Add Horizontal Margins #
<div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mx-200 d-p-200 d-bgc-moderate d-code--md">d-mx-200</dt-stack></div>
Add Vertical Margins #
<div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-my-200 d-p-200 d-bgc-moderate d-code--sm">d-my-200</dt-stack></div>
Negative Margins #
Use d-mbs-n{stop} for negative margins. These use the --dt-spacing-{stop}-negative tokens.
<div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mbs-n100 d-p-200 d-bgc-moderate d-code--md">d-mbs-n100</dt-stack></div> <div class="d-as-center d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mis-n200 d-p-200 d-bgc-moderate d-code--md">d-mis-n200</dt-stack></div>
Auto Margins #
Auto margins allow an element to fill a remaining space within an object. This is especially useful in flex layouts.
<dt-stack direction="row" class="d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mx-auto d-p-200 d-bgc-moderate d-code--md">d-mx-auto</dt-stack></dt-stack> <dt-stack direction="row" class="d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mis-auto d-p-200 d-bgc-moderate d-code--md">d-mis-auto</dt-stack></dt-stack> <dt-stack direction="row" class="d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-mie-auto d-p-200 d-bgc-moderate d-code--md">d-mie-auto</dt-stack></dt-stack>
Classes #
Margins can be added using d-m-{stop} or directional classes like d-m{t|r|b|l|y|x}-{stop}. Logical property aliases are also available: d-mbs-{stop} (margin-block-start, aka top), d-mbe-{stop} (margin-block-end, aka bottom), d-mis-{stop} (margin-inline-start, aka left), d-mie-{stop} (margin-inline-end, aka right).
It is highly recommended to use the DtStack component prior to applying margins individually.
Class
|
Output
|
REM
|
PX
|
|---|---|---|---|
d-m-0 | margin: var(--dt-spacing-0) !important | 0rem | 0px |
d-m-1 | margin: var(--dt-spacing-1) !important | 0.1rem | 1px |
d-m-25 | margin: var(--dt-spacing-25) !important | 0.2rem | 2px |
d-m-50 | margin: var(--dt-spacing-50) !important | 0.4rem | 4px |
d-m-75 | margin: var(--dt-spacing-75) !important | 0.6rem | 6px |
d-m-100 | margin: var(--dt-spacing-100) !important | 0.8rem | 8px |
d-m-125 | margin: var(--dt-spacing-125) !important | 1rem | 10px |
d-m-150 | margin: var(--dt-spacing-150) !important | 1.2rem | 12px |
d-m-175 | margin: var(--dt-spacing-175) !important | 1.4rem | 14px |
d-m-200 | margin: var(--dt-spacing-200) !important | 1.6rem | 16px |
d-m-250 | margin: var(--dt-spacing-250) !important | 2rem | 20px |
d-m-300 | margin: var(--dt-spacing-300) !important | 2.4rem | 24px |
d-m-350 | margin: var(--dt-spacing-350) !important | 2.8rem | 28px |
d-m-400 | margin: var(--dt-spacing-400) !important | 3.2rem | 32px |
d-m-450 | margin: var(--dt-spacing-450) !important | 3.6rem | 36px |
d-m-500 | margin: var(--dt-spacing-500) !important | 4rem | 40px |
d-m-525 | margin: var(--dt-spacing-525) !important | 4.2rem | 42px |
d-m-550 | margin: var(--dt-spacing-550) !important | 4.4rem | 44px |
d-m-600 | margin: var(--dt-spacing-600) !important | 4.8rem | 48px |
d-m-650 | margin: var(--dt-spacing-650) !important | 5.2rem | 52px |
d-m-700 | margin: var(--dt-spacing-700) !important | 5.6rem | 56px |
d-m-750 | margin: var(--dt-spacing-750) !important | 6rem | 60px |
d-m-800 | margin: var(--dt-spacing-800) !important | 6.4rem | 64px |
d-mt-0 Deprecated | margin-block-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-mt-1 Deprecated | margin-block-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-mt-25 Deprecated | margin-block-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-mt-50 Deprecated | margin-block-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-mt-75 Deprecated | margin-block-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-mt-100 Deprecated | margin-block-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-mt-125 Deprecated | margin-block-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-mt-150 Deprecated | margin-block-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-mt-175 Deprecated | margin-block-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-mt-200 Deprecated | margin-block-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-mt-250 Deprecated | margin-block-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-mt-300 Deprecated | margin-block-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-mt-350 Deprecated | margin-block-start: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-mt-400 Deprecated | margin-block-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-mt-450 Deprecated | margin-block-start: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-mt-500 Deprecated | margin-block-start: var(--dt-spacing-500) !important; | 4rem | 40px |
d-mt-525 Deprecated | margin-block-start: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-mt-550 Deprecated | margin-block-start: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-mt-600 Deprecated | margin-block-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-mt-650 Deprecated | margin-block-start: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-mt-700 Deprecated | margin-block-start: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-mt-750 Deprecated | margin-block-start: var(--dt-spacing-750) !important; | 6rem | 60px |
d-mt-800 Deprecated | margin-block-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-mr-0 Deprecated | margin-inline-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-mr-1 Deprecated | margin-inline-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-mr-25 Deprecated | margin-inline-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-mr-50 Deprecated | margin-inline-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-mr-75 Deprecated | margin-inline-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-mr-100 Deprecated | margin-inline-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-mr-125 Deprecated | margin-inline-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-mr-150 Deprecated | margin-inline-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-mr-175 Deprecated | margin-inline-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-mr-200 Deprecated | margin-inline-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-mr-250 Deprecated | margin-inline-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-mr-300 Deprecated | margin-inline-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-mr-350 Deprecated | margin-inline-end: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-mr-400 Deprecated | margin-inline-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-mr-450 Deprecated | margin-inline-end: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-mr-500 Deprecated | margin-inline-end: var(--dt-spacing-500) !important; | 4rem | 40px |
d-mr-525 Deprecated | margin-inline-end: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-mr-550 Deprecated | margin-inline-end: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-mr-600 Deprecated | margin-inline-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-mr-650 Deprecated | margin-inline-end: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-mr-700 Deprecated | margin-inline-end: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-mr-750 Deprecated | margin-inline-end: var(--dt-spacing-750) !important; | 6rem | 60px |
d-mr-800 Deprecated | margin-inline-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-mb-0 Deprecated | margin-block-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-mb-1 Deprecated | margin-block-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-mb-25 Deprecated | margin-block-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-mb-50 Deprecated | margin-block-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-mb-75 Deprecated | margin-block-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-mb-100 Deprecated | margin-block-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-mb-125 Deprecated | margin-block-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-mb-150 Deprecated | margin-block-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-mb-175 Deprecated | margin-block-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-mb-200 Deprecated | margin-block-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-mb-250 Deprecated | margin-block-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-mb-300 Deprecated | margin-block-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-mb-350 Deprecated | margin-block-end: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-mb-400 Deprecated | margin-block-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-mb-450 Deprecated | margin-block-end: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-mb-500 Deprecated | margin-block-end: var(--dt-spacing-500) !important; | 4rem | 40px |
d-mb-525 Deprecated | margin-block-end: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-mb-550 Deprecated | margin-block-end: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-mb-600 Deprecated | margin-block-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-mb-650 Deprecated | margin-block-end: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-mb-700 Deprecated | margin-block-end: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-mb-750 Deprecated | margin-block-end: var(--dt-spacing-750) !important; | 6rem | 60px |
d-mb-800 Deprecated | margin-block-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-ml-0 Deprecated | margin-inline-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-ml-1 Deprecated | margin-inline-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-ml-25 Deprecated | margin-inline-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-ml-50 Deprecated | margin-inline-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-ml-75 Deprecated | margin-inline-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-ml-100 Deprecated | margin-inline-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-ml-125 Deprecated | margin-inline-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-ml-150 Deprecated | margin-inline-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-ml-175 Deprecated | margin-inline-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-ml-200 Deprecated | margin-inline-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-ml-250 Deprecated | margin-inline-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-ml-300 Deprecated | margin-inline-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-ml-350 Deprecated | margin-inline-start: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-ml-400 Deprecated | margin-inline-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-ml-450 Deprecated | margin-inline-start: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-ml-500 Deprecated | margin-inline-start: var(--dt-spacing-500) !important; | 4rem | 40px |
d-ml-525 Deprecated | margin-inline-start: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-ml-550 Deprecated | margin-inline-start: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-ml-600 Deprecated | margin-inline-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-ml-650 Deprecated | margin-inline-start: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-ml-700 Deprecated | margin-inline-start: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-ml-750 Deprecated | margin-inline-start: var(--dt-spacing-750) !important; | 6rem | 60px |
d-ml-800 Deprecated | margin-inline-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-mx-0 | margin-inline: var(--dt-spacing-0) !important; | 0rem | 0px |
d-mx-1 | margin-inline: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-mx-25 | margin-inline: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-mx-50 | margin-inline: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-mx-75 | margin-inline: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-mx-100 | margin-inline: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-mx-125 | margin-inline: var(--dt-spacing-125) !important; | 1rem | 10px |
d-mx-150 | margin-inline: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-mx-175 | margin-inline: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-mx-200 | margin-inline: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-mx-250 | margin-inline: var(--dt-spacing-250) !important; | 2rem | 20px |
d-mx-300 | margin-inline: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-mx-350 | margin-inline: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-mx-400 | margin-inline: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-mx-450 | margin-inline: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-mx-500 | margin-inline: var(--dt-spacing-500) !important; | 4rem | 40px |
d-mx-525 | margin-inline: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-mx-550 | margin-inline: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-mx-600 | margin-inline: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-mx-650 | margin-inline: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-mx-700 | margin-inline: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-mx-750 | margin-inline: var(--dt-spacing-750) !important; | 6rem | 60px |
d-mx-800 | margin-inline: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-my-0 | margin-block: var(--dt-spacing-0) !important; | 0rem | 0px |
d-my-1 | margin-block: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-my-25 | margin-block: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-my-50 | margin-block: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-my-75 | margin-block: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-my-100 | margin-block: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-my-125 | margin-block: var(--dt-spacing-125) !important; | 1rem | 10px |
d-my-150 | margin-block: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-my-175 | margin-block: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-my-200 | margin-block: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-my-250 | margin-block: var(--dt-spacing-250) !important; | 2rem | 20px |
d-my-300 | margin-block: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-my-350 | margin-block: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-my-400 | margin-block: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-my-450 | margin-block: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-my-500 | margin-block: var(--dt-spacing-500) !important; | 4rem | 40px |
d-my-525 | margin-block: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-my-550 | margin-block: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-my-600 | margin-block: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-my-650 | margin-block: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-my-700 | margin-block: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-my-750 | margin-block: var(--dt-spacing-750) !important; | 6rem | 60px |
d-my-800 | margin-block: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-m-n1 | margin: var(--dt-spacing-1-negative) !important | -0.1rem | -1px |
d-m-n25 | margin: var(--dt-spacing-25-negative) !important | -0.2rem | -2px |
d-m-n50 | margin: var(--dt-spacing-50-negative) !important | -0.4rem | -4px |
d-m-n75 | margin: var(--dt-spacing-75-negative) !important | -0.6rem | -6px |
d-m-n100 | margin: var(--dt-spacing-100-negative) !important | -0.8rem | -8px |
d-m-n125 | margin: var(--dt-spacing-125-negative) !important | -1rem | -10px |
d-m-n150 | margin: var(--dt-spacing-150-negative) !important | -1.2rem | -12px |
d-m-n175 | margin: var(--dt-spacing-175-negative) !important | -1.4rem | -14px |
d-m-n200 | margin: var(--dt-spacing-200-negative) !important | -1.6rem | -16px |
d-m-n250 | margin: var(--dt-spacing-250-negative) !important | -2rem | -20px |
d-m-n300 | margin: var(--dt-spacing-300-negative) !important | -2.4rem | -24px |
d-m-n350 | margin: var(--dt-spacing-350-negative) !important | -2.8rem | -28px |
d-m-n400 | margin: var(--dt-spacing-400-negative) !important | -3.2rem | -32px |
d-m-n450 | margin: var(--dt-spacing-450-negative) !important | -3.6rem | -36px |
d-m-n500 | margin: var(--dt-spacing-500-negative) !important | -4rem | -40px |
d-m-n525 | margin: var(--dt-spacing-525-negative) !important | -4.2rem | -42px |
d-m-n550 | margin: var(--dt-spacing-550-negative) !important | -4.4rem | -44px |
d-m-n600 | margin: var(--dt-spacing-600-negative) !important | -4.8rem | -48px |
d-m-n650 | margin: var(--dt-spacing-650-negative) !important | -5.2rem | -52px |
d-m-n700 | margin: var(--dt-spacing-700-negative) !important | -5.6rem | -56px |
d-m-n750 | margin: var(--dt-spacing-750-negative) !important | -6rem | -60px |
d-m-n800 | margin: var(--dt-spacing-800-negative) !important | -6.4rem | -64px |
d-mt-n1 Deprecated | margin-block-start: var(--dt-spacing-1-negative) !important; | -0.1rem | -1px |
d-mt-n25 Deprecated | margin-block-start: var(--dt-spacing-25-negative) !important; | -0.2rem | -2px |
d-mt-n50 Deprecated | margin-block-start: var(--dt-spacing-50-negative) !important; | -0.4rem | -4px |
d-mt-n75 Deprecated | margin-block-start: var(--dt-spacing-75-negative) !important; | -0.6rem | -6px |
d-mt-n100 Deprecated | margin-block-start: var(--dt-spacing-100-negative) !important; | -0.8rem | -8px |
d-mt-n125 Deprecated | margin-block-start: var(--dt-spacing-125-negative) !important; | -1rem | -10px |
d-mt-n150 Deprecated | margin-block-start: var(--dt-spacing-150-negative) !important; | -1.2rem | -12px |
d-mt-n175 Deprecated | margin-block-start: var(--dt-spacing-175-negative) !important; | -1.4rem | -14px |
d-mt-n200 Deprecated | margin-block-start: var(--dt-spacing-200-negative) !important; | -1.6rem | -16px |
d-mt-n250 Deprecated | margin-block-start: var(--dt-spacing-250-negative) !important; | -2rem | -20px |
d-mt-n300 Deprecated | margin-block-start: var(--dt-spacing-300-negative) !important; | -2.4rem | -24px |
d-mt-n350 Deprecated | margin-block-start: var(--dt-spacing-350-negative) !important; | -2.8rem | -28px |
d-mt-n400 Deprecated | margin-block-start: var(--dt-spacing-400-negative) !important; | -3.2rem | -32px |
d-mt-n450 Deprecated | margin-block-start: var(--dt-spacing-450-negative) !important; | -3.6rem | -36px |
d-mt-n500 Deprecated | margin-block-start: var(--dt-spacing-500-negative) !important; | -4rem | -40px |
d-mt-n525 Deprecated | margin-block-start: var(--dt-spacing-525-negative) !important; | -4.2rem | -42px |
d-mt-n550 Deprecated | margin-block-start: var(--dt-spacing-550-negative) !important; | -4.4rem | -44px |
d-mt-n600 Deprecated | margin-block-start: var(--dt-spacing-600-negative) !important; | -4.8rem | -48px |
d-mt-n650 Deprecated | margin-block-start: var(--dt-spacing-650-negative) !important; | -5.2rem | -52px |
d-mt-n700 Deprecated | margin-block-start: var(--dt-spacing-700-negative) !important; | -5.6rem | -56px |
d-mt-n750 Deprecated | margin-block-start: var(--dt-spacing-750-negative) !important; | -6rem | -60px |
d-mt-n800 Deprecated | margin-block-start: var(--dt-spacing-800-negative) !important; | -6.4rem | -64px |
d-mr-n1 Deprecated | margin-inline-end: var(--dt-spacing-1-negative) !important; | -0.1rem | -1px |
d-mr-n25 Deprecated | margin-inline-end: var(--dt-spacing-25-negative) !important; | -0.2rem | -2px |
d-mr-n50 Deprecated | margin-inline-end: var(--dt-spacing-50-negative) !important; | -0.4rem | -4px |
d-mr-n75 Deprecated | margin-inline-end: var(--dt-spacing-75-negative) !important; | -0.6rem | -6px |
d-mr-n100 Deprecated | margin-inline-end: var(--dt-spacing-100-negative) !important; | -0.8rem | -8px |
d-mr-n125 Deprecated | margin-inline-end: var(--dt-spacing-125-negative) !important; | -1rem | -10px |
d-mr-n150 Deprecated | margin-inline-end: var(--dt-spacing-150-negative) !important; | -1.2rem | -12px |
d-mr-n175 Deprecated | margin-inline-end: var(--dt-spacing-175-negative) !important; | -1.4rem | -14px |
d-mr-n200 Deprecated | margin-inline-end: var(--dt-spacing-200-negative) !important; | -1.6rem | -16px |
d-mr-n250 Deprecated | margin-inline-end: var(--dt-spacing-250-negative) !important; | -2rem | -20px |
d-mr-n300 Deprecated | margin-inline-end: var(--dt-spacing-300-negative) !important; | -2.4rem | -24px |
d-mr-n350 Deprecated | margin-inline-end: var(--dt-spacing-350-negative) !important; | -2.8rem | -28px |
d-mr-n400 Deprecated | margin-inline-end: var(--dt-spacing-400-negative) !important; | -3.2rem | -32px |
d-mr-n450 Deprecated | margin-inline-end: var(--dt-spacing-450-negative) !important; | -3.6rem | -36px |
d-mr-n500 Deprecated | margin-inline-end: var(--dt-spacing-500-negative) !important; | -4rem | -40px |
d-mr-n525 Deprecated | margin-inline-end: var(--dt-spacing-525-negative) !important; | -4.2rem | -42px |
d-mr-n550 Deprecated | margin-inline-end: var(--dt-spacing-550-negative) !important; | -4.4rem | -44px |
d-mr-n600 Deprecated | margin-inline-end: var(--dt-spacing-600-negative) !important; | -4.8rem | -48px |
d-mr-n650 Deprecated | margin-inline-end: var(--dt-spacing-650-negative) !important; | -5.2rem | -52px |
d-mr-n700 Deprecated | margin-inline-end: var(--dt-spacing-700-negative) !important; | -5.6rem | -56px |
d-mr-n750 Deprecated | margin-inline-end: var(--dt-spacing-750-negative) !important; | -6rem | -60px |
d-mr-n800 Deprecated | margin-inline-end: var(--dt-spacing-800-negative) !important; | -6.4rem | -64px |
d-mb-n1 Deprecated | margin-block-end: var(--dt-spacing-1-negative) !important; | -0.1rem | -1px |
d-mb-n25 Deprecated | margin-block-end: var(--dt-spacing-25-negative) !important; | -0.2rem | -2px |
d-mb-n50 Deprecated | margin-block-end: var(--dt-spacing-50-negative) !important; | -0.4rem | -4px |
d-mb-n75 Deprecated | margin-block-end: var(--dt-spacing-75-negative) !important; | -0.6rem | -6px |
d-mb-n100 Deprecated | margin-block-end: var(--dt-spacing-100-negative) !important; | -0.8rem | -8px |
d-mb-n125 Deprecated | margin-block-end: var(--dt-spacing-125-negative) !important; | -1rem | -10px |
d-mb-n150 Deprecated | margin-block-end: var(--dt-spacing-150-negative) !important; | -1.2rem | -12px |
d-mb-n175 Deprecated | margin-block-end: var(--dt-spacing-175-negative) !important; | -1.4rem | -14px |
d-mb-n200 Deprecated | margin-block-end: var(--dt-spacing-200-negative) !important; | -1.6rem | -16px |
d-mb-n250 Deprecated | margin-block-end: var(--dt-spacing-250-negative) !important; | -2rem | -20px |
d-mb-n300 Deprecated | margin-block-end: var(--dt-spacing-300-negative) !important; | -2.4rem | -24px |
d-mb-n350 Deprecated | margin-block-end: var(--dt-spacing-350-negative) !important; | -2.8rem | -28px |
d-mb-n400 Deprecated | margin-block-end: var(--dt-spacing-400-negative) !important; | -3.2rem | -32px |
d-mb-n450 Deprecated | margin-block-end: var(--dt-spacing-450-negative) !important; | -3.6rem | -36px |
d-mb-n500 Deprecated | margin-block-end: var(--dt-spacing-500-negative) !important; | -4rem | -40px |
d-mb-n525 Deprecated | margin-block-end: var(--dt-spacing-525-negative) !important; | -4.2rem | -42px |
d-mb-n550 Deprecated | margin-block-end: var(--dt-spacing-550-negative) !important; | -4.4rem | -44px |
d-mb-n600 Deprecated | margin-block-end: var(--dt-spacing-600-negative) !important; | -4.8rem | -48px |
d-mb-n650 Deprecated | margin-block-end: var(--dt-spacing-650-negative) !important; | -5.2rem | -52px |
d-mb-n700 Deprecated | margin-block-end: var(--dt-spacing-700-negative) !important; | -5.6rem | -56px |
d-mb-n750 Deprecated | margin-block-end: var(--dt-spacing-750-negative) !important; | -6rem | -60px |
d-mb-n800 Deprecated | margin-block-end: var(--dt-spacing-800-negative) !important; | -6.4rem | -64px |
d-ml-n1 Deprecated | margin-inline-start: var(--dt-spacing-1-negative) !important; | -0.1rem | -1px |
d-ml-n25 Deprecated | margin-inline-start: var(--dt-spacing-25-negative) !important; | -0.2rem | -2px |
d-ml-n50 Deprecated | margin-inline-start: var(--dt-spacing-50-negative) !important; | -0.4rem | -4px |
d-ml-n75 Deprecated | margin-inline-start: var(--dt-spacing-75-negative) !important; | -0.6rem | -6px |
d-ml-n100 Deprecated | margin-inline-start: var(--dt-spacing-100-negative) !important; | -0.8rem | -8px |
d-ml-n125 Deprecated | margin-inline-start: var(--dt-spacing-125-negative) !important; | -1rem | -10px |
d-ml-n150 Deprecated | margin-inline-start: var(--dt-spacing-150-negative) !important; | -1.2rem | -12px |
d-ml-n175 Deprecated | margin-inline-start: var(--dt-spacing-175-negative) !important; | -1.4rem | -14px |
d-ml-n200 Deprecated | margin-inline-start: var(--dt-spacing-200-negative) !important; | -1.6rem | -16px |
d-ml-n250 Deprecated | margin-inline-start: var(--dt-spacing-250-negative) !important; | -2rem | -20px |
d-ml-n300 Deprecated | margin-inline-start: var(--dt-spacing-300-negative) !important; | -2.4rem | -24px |
d-ml-n350 Deprecated | margin-inline-start: var(--dt-spacing-350-negative) !important; | -2.8rem | -28px |
d-ml-n400 Deprecated | margin-inline-start: var(--dt-spacing-400-negative) !important; | -3.2rem | -32px |
d-ml-n450 Deprecated | margin-inline-start: var(--dt-spacing-450-negative) !important; | -3.6rem | -36px |
d-ml-n500 Deprecated | margin-inline-start: var(--dt-spacing-500-negative) !important; | -4rem | -40px |
d-ml-n525 Deprecated | margin-inline-start: var(--dt-spacing-525-negative) !important; | -4.2rem | -42px |
d-ml-n550 Deprecated | margin-inline-start: var(--dt-spacing-550-negative) !important; | -4.4rem | -44px |
d-ml-n600 Deprecated | margin-inline-start: var(--dt-spacing-600-negative) !important; | -4.8rem | -48px |
d-ml-n650 Deprecated | margin-inline-start: var(--dt-spacing-650-negative) !important; | -5.2rem | -52px |
d-ml-n700 Deprecated | margin-inline-start: var(--dt-spacing-700-negative) !important; | -5.6rem | -56px |
d-ml-n750 Deprecated | margin-inline-start: var(--dt-spacing-750-negative) !important; | -6rem | -60px |
d-ml-n800 Deprecated | margin-inline-start: var(--dt-spacing-800-negative) !important; | -6.4rem | -64px |
d-mx-n1 | margin-inline: var(--dt-spacing-1-negative) !important; | -0.1rem | -1px |
d-mx-n25 | margin-inline: var(--dt-spacing-25-negative) !important; | -0.2rem | -2px |
d-mx-n50 | margin-inline: var(--dt-spacing-50-negative) !important; | -0.4rem | -4px |
d-mx-n75 | margin-inline: var(--dt-spacing-75-negative) !important; | -0.6rem | -6px |
d-mx-n100 | margin-inline: var(--dt-spacing-100-negative) !important; | -0.8rem | -8px |
d-mx-n125 | margin-inline: var(--dt-spacing-125-negative) !important; | -1rem | -10px |
d-mx-n150 | margin-inline: var(--dt-spacing-150-negative) !important; | -1.2rem | -12px |
d-mx-n175 | margin-inline: var(--dt-spacing-175-negative) !important; | -1.4rem | -14px |
d-mx-n200 | margin-inline: var(--dt-spacing-200-negative) !important; | -1.6rem | -16px |
d-mx-n250 | margin-inline: var(--dt-spacing-250-negative) !important; | -2rem | -20px |
d-mx-n300 | margin-inline: var(--dt-spacing-300-negative) !important; | -2.4rem | -24px |
d-mx-n350 | margin-inline: var(--dt-spacing-350-negative) !important; | -2.8rem | -28px |
d-mx-n400 | margin-inline: var(--dt-spacing-400-negative) !important; | -3.2rem | -32px |
d-mx-n450 | margin-inline: var(--dt-spacing-450-negative) !important; | -3.6rem | -36px |
d-mx-n500 | margin-inline: var(--dt-spacing-500-negative) !important; | -4rem | -40px |
d-mx-n525 | margin-inline: var(--dt-spacing-525-negative) !important; | -4.2rem | -42px |
d-mx-n550 | margin-inline: var(--dt-spacing-550-negative) !important; | -4.4rem | -44px |
d-mx-n600 | margin-inline: var(--dt-spacing-600-negative) !important; | -4.8rem | -48px |
d-mx-n650 | margin-inline: var(--dt-spacing-650-negative) !important; | -5.2rem | -52px |
d-mx-n700 | margin-inline: var(--dt-spacing-700-negative) !important; | -5.6rem | -56px |
d-mx-n750 | margin-inline: var(--dt-spacing-750-negative) !important; | -6rem | -60px |
d-mx-n800 | margin-inline: var(--dt-spacing-800-negative) !important; | -6.4rem | -64px |
d-my-n1 | margin-block: var(--dt-spacing-1-negative) !important; | -0.1rem | -1px |
d-my-n25 | margin-block: var(--dt-spacing-25-negative) !important; | -0.2rem | -2px |
d-my-n50 | margin-block: var(--dt-spacing-50-negative) !important; | -0.4rem | -4px |
d-my-n75 | margin-block: var(--dt-spacing-75-negative) !important; | -0.6rem | -6px |
d-my-n100 | margin-block: var(--dt-spacing-100-negative) !important; | -0.8rem | -8px |
d-my-n125 | margin-block: var(--dt-spacing-125-negative) !important; | -1rem | -10px |
d-my-n150 | margin-block: var(--dt-spacing-150-negative) !important; | -1.2rem | -12px |
d-my-n175 | margin-block: var(--dt-spacing-175-negative) !important; | -1.4rem | -14px |
d-my-n200 | margin-block: var(--dt-spacing-200-negative) !important; | -1.6rem | -16px |
d-my-n250 | margin-block: var(--dt-spacing-250-negative) !important; | -2rem | -20px |
d-my-n300 | margin-block: var(--dt-spacing-300-negative) !important; | -2.4rem | -24px |
d-my-n350 | margin-block: var(--dt-spacing-350-negative) !important; | -2.8rem | -28px |
d-my-n400 | margin-block: var(--dt-spacing-400-negative) !important; | -3.2rem | -32px |
d-my-n450 | margin-block: var(--dt-spacing-450-negative) !important; | -3.6rem | -36px |
d-my-n500 | margin-block: var(--dt-spacing-500-negative) !important; | -4rem | -40px |
d-my-n525 | margin-block: var(--dt-spacing-525-negative) !important; | -4.2rem | -42px |
d-my-n550 | margin-block: var(--dt-spacing-550-negative) !important; | -4.4rem | -44px |
d-my-n600 | margin-block: var(--dt-spacing-600-negative) !important; | -4.8rem | -48px |
d-my-n650 | margin-block: var(--dt-spacing-650-negative) !important; | -5.2rem | -52px |
d-my-n700 | margin-block: var(--dt-spacing-700-negative) !important; | -5.6rem | -56px |
d-my-n750 | margin-block: var(--dt-spacing-750-negative) !important; | -6rem | -60px |
d-my-n800 | margin-block: var(--dt-spacing-800-negative) !important; | -6.4rem | -64px |
| d-m-auto | margin: auto !important | N/A | N/A |
| d-mt-auto Deprecated | margin-block-start: auto !important; | N/A | N/A |
| d-mr-auto Deprecated | margin-inline-end: auto !important; | N/A | N/A |
| d-mb-auto Deprecated | margin-block-end: auto !important; | N/A | N/A |
| d-ml-auto Deprecated | margin-inline-start: auto !important; | N/A | N/A |
| d-mx-auto | margin-inline: auto !important; | N/A | N/A |
| d-my-auto | margin-block: auto !important; | N/A | N/A |
| d-m-unset | margin: unset !important | N/A | N/A |
| d-mt-unset Deprecated | margin-block-start: unset !important; | N/A | N/A |
| d-mr-unset Deprecated | margin-inline-end: unset !important; | N/A | N/A |
| d-mb-unset Deprecated | margin-block-end: unset !important; | N/A | N/A |
| d-ml-unset Deprecated | margin-inline-start: unset !important; | N/A | N/A |
| d-mx-unset | margin-inline: unset !important; | N/A | N/A |
| d-my-unset | margin-block: unset !important; | N/A | N/A |