Utilities for setting an element's interior spacing between child elements and the element's box edge.
Use d-p-{stop} to set padding using spacing token stops. The number references the spacing token (d-p-100 = --dt-spacing-100 = 8px).
<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>
<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>
<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>
<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>
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-pbs-0 | padding-block-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pbs-1 | padding-block-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pbs-25 | padding-block-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pbs-50 | padding-block-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pbs-75 | padding-block-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pbs-100 | padding-block-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pbs-125 | padding-block-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pbs-150 | padding-block-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pbs-175 | padding-block-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pbs-200 | padding-block-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pbs-250 | padding-block-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pbs-300 | padding-block-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pbs-350 | padding-block-start: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pbs-400 | padding-block-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pbs-450 | padding-block-start: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pbs-500 | padding-block-start: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pbs-525 | padding-block-start: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pbs-550 | padding-block-start: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pbs-600 | padding-block-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pbs-650 | padding-block-start: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pbs-700 | padding-block-start: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pbs-750 | padding-block-start: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pbs-800 | padding-block-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pbe-0 | padding-block-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pbe-1 | padding-block-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pbe-25 | padding-block-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pbe-50 | padding-block-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pbe-75 | padding-block-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pbe-100 | padding-block-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pbe-125 | padding-block-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pbe-150 | padding-block-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pbe-175 | padding-block-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pbe-200 | padding-block-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pbe-250 | padding-block-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pbe-300 | padding-block-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pbe-350 | padding-block-end: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pbe-400 | padding-block-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pbe-450 | padding-block-end: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pbe-500 | padding-block-end: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pbe-525 | padding-block-end: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pbe-550 | padding-block-end: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pbe-600 | padding-block-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pbe-650 | padding-block-end: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pbe-700 | padding-block-end: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pbe-750 | padding-block-end: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pbe-800 | padding-block-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pis-0 | padding-inline-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pis-1 | padding-inline-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pis-25 | padding-inline-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pis-50 | padding-inline-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pis-75 | padding-inline-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pis-100 | padding-inline-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pis-125 | padding-inline-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pis-150 | padding-inline-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pis-175 | padding-inline-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pis-200 | padding-inline-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pis-250 | padding-inline-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pis-300 | padding-inline-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pis-350 | padding-inline-start: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pis-400 | padding-inline-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pis-450 | padding-inline-start: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pis-500 | padding-inline-start: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pis-525 | padding-inline-start: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pis-550 | padding-inline-start: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pis-600 | padding-inline-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pis-650 | padding-inline-start: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pis-700 | padding-inline-start: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pis-750 | padding-inline-start: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pis-800 | padding-inline-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pie-0 | padding-inline-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pie-1 | padding-inline-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pie-25 | padding-inline-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pie-50 | padding-inline-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pie-75 | padding-inline-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pie-100 | padding-inline-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pie-125 | padding-inline-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pie-150 | padding-inline-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pie-175 | padding-inline-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pie-200 | padding-inline-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pie-250 | padding-inline-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pie-300 | padding-inline-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pie-350 | padding-inline-end: var(--dt-spacing-350) !important; | 2.8rem | 28px |
d-pie-400 | padding-inline-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pie-450 | padding-inline-end: var(--dt-spacing-450) !important; | 3.6rem | 36px |
d-pie-500 | padding-inline-end: var(--dt-spacing-500) !important; | 4rem | 40px |
d-pie-525 | padding-inline-end: var(--dt-spacing-525) !important; | 4.2rem | 42px |
d-pie-550 | padding-inline-end: var(--dt-spacing-550) !important; | 4.4rem | 44px |
d-pie-600 | padding-inline-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pie-650 | padding-inline-end: var(--dt-spacing-650) !important; | 5.2rem | 52px |
d-pie-700 | padding-inline-end: var(--dt-spacing-700) !important; | 5.6rem | 56px |
d-pie-750 | padding-inline-end: var(--dt-spacing-750) !important; | 6rem | 60px |
d-pie-800 | padding-inline-end: 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-pbs-unset | padding-block-start: unset !important; | N/A | N/A |
d-pbe-unset | padding-block-end: unset !important; | N/A | N/A |
d-pis-unset | padding-inline-start: unset !important; | N/A | N/A |
d-pie-unset | padding-inline-end: 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 |
d-p0 Deprecated | padding: var(--dt-spacing-0) !important | 0rem | 0px |
d-p1 Deprecated | padding: var(--dt-spacing-1) !important | 0.1rem | 1px |
d-p2 Deprecated | padding: var(--dt-spacing-25) !important | 0.2rem | 2px |
d-p4 Deprecated | padding: var(--dt-spacing-50) !important | 0.4rem | 4px |
d-p6 Deprecated | padding: var(--dt-spacing-75) !important | 0.6rem | 6px |
d-p8 Deprecated | padding: var(--dt-spacing-100) !important | 0.8rem | 8px |
d-p10 Deprecated | padding: var(--dt-spacing-125) !important | 1rem | 10px |
d-p12 Deprecated | padding: var(--dt-spacing-150) !important | 1.2rem | 12px |
d-p14 Deprecated | padding: var(--dt-spacing-175) !important | 1.4rem | 14px |
d-p16 Deprecated | padding: var(--dt-spacing-200) !important | 1.6rem | 16px |
d-p20 Deprecated | padding: var(--dt-spacing-250) !important | 2rem | 20px |
d-p24 Deprecated | padding: var(--dt-spacing-300) !important | 2.4rem | 24px |
d-p32 Deprecated | padding: var(--dt-spacing-400) !important | 3.2rem | 32px |
d-p48 Deprecated | padding: var(--dt-spacing-600) !important | 4.8rem | 48px |
d-p64 Deprecated | padding: var(--dt-spacing-800) !important | 6.4rem | 64px |
d-p96 Deprecated | padding: var(--dt-layout-150) !important | 9.6rem | 96px |
d-p128 Deprecated | padding: var(--dt-layout-200) !important | 12.8rem | 128px |
d-pt0 Deprecated | padding-block-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pt1 Deprecated | padding-block-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pt2 Deprecated | padding-block-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pt4 Deprecated | padding-block-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pt6 Deprecated | padding-block-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pt8 Deprecated | padding-block-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pt10 Deprecated | padding-block-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pt12 Deprecated | padding-block-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pt14 Deprecated | padding-block-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pt16 Deprecated | padding-block-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pt20 Deprecated | padding-block-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pt24 Deprecated | padding-block-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pt32 Deprecated | padding-block-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pt48 Deprecated | padding-block-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pt64 Deprecated | padding-block-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pt96 Deprecated | padding-block-start: var(--dt-layout-150) !important; | 9.6rem | 96px |
d-pt128 Deprecated | padding-block-start: var(--dt-layout-200) !important; | 12.8rem | 128px |
d-pr0 Deprecated | padding-inline-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pr1 Deprecated | padding-inline-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pr2 Deprecated | padding-inline-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pr4 Deprecated | padding-inline-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pr6 Deprecated | padding-inline-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pr8 Deprecated | padding-inline-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pr10 Deprecated | padding-inline-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pr12 Deprecated | padding-inline-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pr14 Deprecated | padding-inline-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pr16 Deprecated | padding-inline-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pr20 Deprecated | padding-inline-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pr24 Deprecated | padding-inline-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pr32 Deprecated | padding-inline-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pr48 Deprecated | padding-inline-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pr64 Deprecated | padding-inline-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pr96 Deprecated | padding-inline-end: var(--dt-layout-150) !important; | 9.6rem | 96px |
d-pr128 Deprecated | padding-inline-end: var(--dt-layout-200) !important; | 12.8rem | 128px |
d-pb0 Deprecated | padding-block-end: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pb1 Deprecated | padding-block-end: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pb2 Deprecated | padding-block-end: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pb4 Deprecated | padding-block-end: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pb6 Deprecated | padding-block-end: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pb8 Deprecated | padding-block-end: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pb10 Deprecated | padding-block-end: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pb12 Deprecated | padding-block-end: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pb14 Deprecated | padding-block-end: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pb16 Deprecated | padding-block-end: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pb20 Deprecated | padding-block-end: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pb24 Deprecated | padding-block-end: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pb32 Deprecated | padding-block-end: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pb48 Deprecated | padding-block-end: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pb64 Deprecated | padding-block-end: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pb96 Deprecated | padding-block-end: var(--dt-layout-150) !important; | 9.6rem | 96px |
d-pb128 Deprecated | padding-block-end: var(--dt-layout-200) !important; | 12.8rem | 128px |
d-pl0 Deprecated | padding-inline-start: var(--dt-spacing-0) !important; | 0rem | 0px |
d-pl1 Deprecated | padding-inline-start: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-pl2 Deprecated | padding-inline-start: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-pl4 Deprecated | padding-inline-start: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-pl6 Deprecated | padding-inline-start: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-pl8 Deprecated | padding-inline-start: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-pl10 Deprecated | padding-inline-start: var(--dt-spacing-125) !important; | 1rem | 10px |
d-pl12 Deprecated | padding-inline-start: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-pl14 Deprecated | padding-inline-start: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-pl16 Deprecated | padding-inline-start: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-pl20 Deprecated | padding-inline-start: var(--dt-spacing-250) !important; | 2rem | 20px |
d-pl24 Deprecated | padding-inline-start: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-pl32 Deprecated | padding-inline-start: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-pl48 Deprecated | padding-inline-start: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-pl64 Deprecated | padding-inline-start: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-pl96 Deprecated | padding-inline-start: var(--dt-layout-150) !important; | 9.6rem | 96px |
d-pl128 Deprecated | padding-inline-start: var(--dt-layout-200) !important; | 12.8rem | 128px |
d-px0 Deprecated | padding-inline: var(--dt-spacing-0) !important; | 0rem | 0px |
d-px1 Deprecated | padding-inline: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-px2 Deprecated | padding-inline: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-px4 Deprecated | padding-inline: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-px6 Deprecated | padding-inline: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-px8 Deprecated | padding-inline: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-px10 Deprecated | padding-inline: var(--dt-spacing-125) !important; | 1rem | 10px |
d-px12 Deprecated | padding-inline: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-px14 Deprecated | padding-inline: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-px16 Deprecated | padding-inline: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-px20 Deprecated | padding-inline: var(--dt-spacing-250) !important; | 2rem | 20px |
d-px24 Deprecated | padding-inline: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-px32 Deprecated | padding-inline: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-px48 Deprecated | padding-inline: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-px64 Deprecated | padding-inline: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-px96 Deprecated | padding-inline: var(--dt-layout-150) !important; | 9.6rem | 96px |
d-px128 Deprecated | padding-inline: var(--dt-layout-200) !important; | 12.8rem | 128px |
d-py0 Deprecated | padding-block: var(--dt-spacing-0) !important; | 0rem | 0px |
d-py1 Deprecated | padding-block: var(--dt-spacing-1) !important; | 0.1rem | 1px |
d-py2 Deprecated | padding-block: var(--dt-spacing-25) !important; | 0.2rem | 2px |
d-py4 Deprecated | padding-block: var(--dt-spacing-50) !important; | 0.4rem | 4px |
d-py6 Deprecated | padding-block: var(--dt-spacing-75) !important; | 0.6rem | 6px |
d-py8 Deprecated | padding-block: var(--dt-spacing-100) !important; | 0.8rem | 8px |
d-py10 Deprecated | padding-block: var(--dt-spacing-125) !important; | 1rem | 10px |
d-py12 Deprecated | padding-block: var(--dt-spacing-150) !important; | 1.2rem | 12px |
d-py14 Deprecated | padding-block: var(--dt-spacing-175) !important; | 1.4rem | 14px |
d-py16 Deprecated | padding-block: var(--dt-spacing-200) !important; | 1.6rem | 16px |
d-py20 Deprecated | padding-block: var(--dt-spacing-250) !important; | 2rem | 20px |
d-py24 Deprecated | padding-block: var(--dt-spacing-300) !important; | 2.4rem | 24px |
d-py32 Deprecated | padding-block: var(--dt-spacing-400) !important; | 3.2rem | 32px |
d-py48 Deprecated | padding-block: var(--dt-spacing-600) !important; | 4.8rem | 48px |
d-py64 Deprecated | padding-block: var(--dt-spacing-800) !important; | 6.4rem | 64px |
d-py96 Deprecated | padding-block: var(--dt-layout-150) !important; | 9.6rem | 96px |
d-py128 Deprecated | padding-block: var(--dt-layout-200) !important; | 12.8rem | 128px |
Padding documentation last updated Wednesday, September 16, 2026