Use d-p-{stop} to set padding using spacing token stops. The number references the spacing token (d-p-100 = --dt-spacing-100 = 8px).
Add Padding to All Sides #
<div class="d-size-200 d-p-200 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-fl1 d-h100p d-bgc-moderate d-bar-300 d-code--md">d-p-200</dt-stack></div>
Add Padding to a Single Side #
<div class="d-as-center d-pbs-150 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bber-300 d-code--md">d-pbs-150</dt-stack></div> <div class="d-as-center d-pie-200 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-brl4 d-code--md">d-pie-200</dt-stack></div> <div class="d-as-center d-pbe-300 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bbsr-300 d-code--md">d-pbe-300</dt-stack></div> <div class="d-as-center d-pis-400 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bier-300 d-code--md">d-pis-400</dt-stack></div>
Add Horizontal Padding #
<div class="d-as-center d-px-200 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-code--md">d-px-200</dt-stack></div>
Add Vertical Padding #
<div class="d-as-center d-py-300 d-bar-400 d-bgc-bold d-of-hidden"><dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-code--md">d-py-300</dt-stack></div>
Classes #
Padding can be added to an element by using d-p-{stop} or a directional class like d-p{t|r|b|l|y|x}-{stop}. Logical property aliases are also available: d-pbs-{stop} (padding-block-start, aka top), d-pbe-{stop} (padding-block-end, aka bottom), d-pis-{stop} (padding-inline-start, aka left), d-pie-{stop} (padding-inline-end, aka right).
It is highly recommended to use the DtBox component before applying padding individually.
Class
|
Output
|
REM
|
PX
|
|---|---|---|---|
d-p-0 | padding: var(--dt-spacing-0) !important | 0rem | 0px |
d-p-1 | padding: var(--dt-spacing-1) !important | 0.1rem | 1px |
d-p-25 | padding: var(--dt-spacing-25) !important | 0.2rem | 2px |
d-p-50 | padding: var(--dt-spacing-50) !important | 0.4rem | 4px |
d-p-75 | padding: var(--dt-spacing-75) !important | 0.6rem | 6px |
d-p-100 | padding: var(--dt-spacing-100) !important | 0.8rem | 8px |
d-p-125 | padding: var(--dt-spacing-125) !important | 1rem | 10px |
d-p-150 | padding: var(--dt-spacing-150) !important | 1.2rem | 12px |
d-p-175 | padding: var(--dt-spacing-175) !important | 1.4rem | 14px |
d-p-200 | padding: var(--dt-spacing-200) !important | 1.6rem | 16px |
d-p-250 | padding: var(--dt-spacing-250) !important | 2rem | 20px |
d-p-300 | padding: var(--dt-spacing-300) !important | 2.4rem | 24px |
d-p-350 | padding: var(--dt-spacing-350) !important | 2.8rem | 28px |
d-p-400 | padding: var(--dt-spacing-400) !important | 3.2rem | 32px |
d-p-450 | padding: var(--dt-spacing-450) !important | 3.6rem | 36px |
d-p-500 | padding: var(--dt-spacing-500) !important | 4rem | 40px |
d-p-525 | padding: var(--dt-spacing-525) !important | 4.2rem | 42px |
d-p-550 | padding: var(--dt-spacing-550) !important | 4.4rem | 44px |
d-p-600 | padding: var(--dt-spacing-600) !important | 4.8rem | 48px |
d-p-650 | padding: var(--dt-spacing-650) !important | 5.2rem | 52px |
d-p-700 | padding: var(--dt-spacing-700) !important | 5.6rem | 56px |
d-p-750 | padding: var(--dt-spacing-750) !important | 6rem | 60px |
d-p-800 | padding: var(--dt-spacing-800) !important | 6.4rem | 64px |
d-pt-0 Deprecated | padding-block-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pt-1 Deprecated | padding-block-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pt-25 Deprecated | padding-block-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pt-50 Deprecated | padding-block-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pt-75 Deprecated | padding-block-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pt-100 Deprecated | padding-block-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pt-125 Deprecated | padding-block-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pt-150 Deprecated | padding-block-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pt-175 Deprecated | padding-block-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pt-200 Deprecated | padding-block-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pt-250 Deprecated | padding-block-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pt-300 Deprecated | padding-block-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pt-350 Deprecated | padding-block-start: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pt-400 Deprecated | padding-block-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pt-450 Deprecated | padding-block-start: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pt-500 Deprecated | padding-block-start: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pt-525 Deprecated | padding-block-start: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pt-550 Deprecated | padding-block-start: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pt-600 Deprecated | padding-block-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pt-650 Deprecated | padding-block-start: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pt-700 Deprecated | padding-block-start: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pt-750 Deprecated | padding-block-start: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pt-800 Deprecated | padding-block-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pr-0 Deprecated | padding-inline-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pr-1 Deprecated | padding-inline-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pr-25 Deprecated | padding-inline-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pr-50 Deprecated | padding-inline-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pr-75 Deprecated | padding-inline-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pr-100 Deprecated | padding-inline-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pr-125 Deprecated | padding-inline-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pr-150 Deprecated | padding-inline-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pr-175 Deprecated | padding-inline-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pr-200 Deprecated | padding-inline-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pr-250 Deprecated | padding-inline-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pr-300 Deprecated | padding-inline-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pr-350 Deprecated | padding-inline-end: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pr-400 Deprecated | padding-inline-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pr-450 Deprecated | padding-inline-end: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pr-500 Deprecated | padding-inline-end: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pr-525 Deprecated | padding-inline-end: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pr-550 Deprecated | padding-inline-end: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pr-600 Deprecated | padding-inline-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pr-650 Deprecated | padding-inline-end: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pr-700 Deprecated | padding-inline-end: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pr-750 Deprecated | padding-inline-end: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pr-800 Deprecated | padding-inline-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pb-0 Deprecated | padding-block-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pb-1 Deprecated | padding-block-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pb-25 Deprecated | padding-block-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pb-50 Deprecated | padding-block-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pb-75 Deprecated | padding-block-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pb-100 Deprecated | padding-block-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pb-125 Deprecated | padding-block-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pb-150 Deprecated | padding-block-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pb-175 Deprecated | padding-block-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pb-200 Deprecated | padding-block-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pb-250 Deprecated | padding-block-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pb-300 Deprecated | padding-block-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pb-350 Deprecated | padding-block-end: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pb-400 Deprecated | padding-block-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pb-450 Deprecated | padding-block-end: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pb-500 Deprecated | padding-block-end: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pb-525 Deprecated | padding-block-end: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pb-550 Deprecated | padding-block-end: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pb-600 Deprecated | padding-block-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pb-650 Deprecated | padding-block-end: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pb-700 Deprecated | padding-block-end: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pb-750 Deprecated | padding-block-end: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pb-800 Deprecated | padding-block-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pl-0 Deprecated | padding-inline-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pl-1 Deprecated | padding-inline-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pl-25 Deprecated | padding-inline-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pl-50 Deprecated | padding-inline-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pl-75 Deprecated | padding-inline-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pl-100 Deprecated | padding-inline-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pl-125 Deprecated | padding-inline-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pl-150 Deprecated | padding-inline-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pl-175 Deprecated | padding-inline-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pl-200 Deprecated | padding-inline-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pl-250 Deprecated | padding-inline-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pl-300 Deprecated | padding-inline-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pl-350 Deprecated | padding-inline-start: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pl-400 Deprecated | padding-inline-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pl-450 Deprecated | padding-inline-start: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pl-500 Deprecated | padding-inline-start: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pl-525 Deprecated | padding-inline-start: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pl-550 Deprecated | padding-inline-start: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pl-600 Deprecated | padding-inline-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pl-650 Deprecated | padding-inline-start: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pl-700 Deprecated | padding-inline-start: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pl-750 Deprecated | padding-inline-start: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pl-800 Deprecated | padding-inline-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-px-0 | padding-inline: var(--dt-spacing-0) !important; | 0rem | 0px |
d-px-1 | padding-inline: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-px-25 | padding-inline: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-px-50 | padding-inline: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-px-75 | padding-inline: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-px-100 | padding-inline: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-px-125 | padding-inline: var(--dt-spacing-125) !important; | 1rem | 10px |
d-px-150 | padding-inline: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-px-175 | padding-inline: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-px-200 | padding-inline: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-px-250 | padding-inline: var(--dt-spacing-250) !important; | 2rem | 20px |
d-px-300 | padding-inline: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-px-350 | padding-inline: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-px-400 | padding-inline: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-px-450 | padding-inline: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-px-500 | padding-inline: var(--dt-spacing-500) !important; | 4rem | 40px |
d-px-525 | padding-inline: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-px-550 | padding-inline: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-px-600 | padding-inline: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-px-650 | padding-inline: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-px-700 | padding-inline: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-px-750 | padding-inline: var(--dt-spacing-750) !important; | 6rem | 60px |
d-px-800 | padding-inline: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-py-0 | padding-block: var(--dt-spacing-0) !important; | 0rem | 0px |
d-py-1 | padding-block: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-py-25 | padding-block: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-py-50 | padding-block: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-py-75 | padding-block: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-py-100 | padding-block: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-py-125 | padding-block: var(--dt-spacing-125) !important; | 1rem | 10px |
d-py-150 | padding-block: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-py-175 | padding-block: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-py-200 | padding-block: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-py-250 | padding-block: var(--dt-spacing-250) !important; | 2rem | 20px |
d-py-300 | padding-block: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-py-350 | padding-block: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-py-400 | padding-block: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-py-450 | padding-block: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-py-500 | padding-block: var(--dt-spacing-500) !important; | 4rem | 40px |
d-py-525 | padding-block: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-py-550 | padding-block: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-py-600 | padding-block: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-py-650 | padding-block: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-py-700 | padding-block: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-py-750 | padding-block: var(--dt-spacing-750) !important; | 6rem | 60px |
d-py-800 | padding-block: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-p-unset | padding: unset !important | N/A | N/A |
d-pt-unset Deprecated | padding-block-start: unset !important; | N/A | N/A |
d-pr-unset Deprecated | padding-inline-end: unset !important; | N/A | N/A |
d-pb-unset Deprecated | padding-block-end: unset !important; | N/A | N/A |
d-pl-unset Deprecated | padding-inline-start: unset !important; | N/A | N/A |
d-px-unset | padding-inline: unset !important; | N/A | N/A |
d-py-unset | padding-block: unset !important; | N/A | N/A |