Padding

Utilities to adjust an element's interior spacing between its child elements and the element's box edge.

Starting in v5.9.0, Dialtone offers immutable padding 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.

Components typically set their own padding defaults. However these padding utilities can be used to override these defaults in one-off situations..

Classes

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

Class Deprecated Class Output
.d-p0 .d-padding0 padding: 0 !important;
.d-p1 .d-padding1 padding: .1rem !important;
.d-p2 .d-padding2 padding: .2rem !important;
.d-p4 .d-padding4 padding: .4rem !important;
.d-p6 .d-padding6 padding: .6rem !important;
.d-p8 .d-padding8 padding: .8rem !important;
.d-p12 .d-padding12 padding: 1.2rem !important;
.d-p16 .d-padding16 padding: 1.6rem !important;
.d-p24 .d-padding24 padding: 2.4rem !important;
.d-p32 .d-padding32 padding: 3.2rem !important;
.d-p48 .d-padding48 padding: 4.8rem !important;
.d-p64 .d-padding64 padding: 6.4rem !important;
.d-pt0 .d-padding-top0 padding-top: 0 !important;
.d-pt1 .d-padding-top1 padding-top: .1rem !important;
.d-pt2 .d-padding-top2 padding-top: .2rem !important;
.d-pt4 .d-padding-top4 padding-top: .4rem !important;
.d-pt6 .d-padding-top6 padding-top: .6rem !important;
.d-pt8 .d-padding-top8 padding-top: .8rem !important;
.d-pt12 .d-padding-top12 padding-top: 1.2rem !important;
.d-pt16 .d-padding-top16 padding-top: 1.6rem !important;
.d-pt24 .d-padding-top24 padding-top: 2.4rem !important;
.d-pt32 .d-padding-top32 padding-top: 3.2rem !important;
.d-pt48 .d-padding-top48 padding-top: 4.8rem !important;
.d-pt64 .d-padding-top64 padding-top: 6.4rem !important;
.d-pr0 .d-padding-right0 padding-right: 0 !important;
.d-pr1 .d-padding-right1 padding-right: .1rem !important;
.d-pr2 .d-padding-right2 padding-right: .2rem !important;
.d-pr4 .d-padding-right4 padding-right: .4rem !important;
.d-pr6 .d-padding-right6 padding-right: .6rem !important;
.d-pr8 .d-padding-right8 padding-right: .8rem !important;
.d-pr12 .d-padding-right12 padding-right: 1.2rem !important;
.d-pr16 .d-padding-right16 padding-right: 1.6rem !important;
.d-pr24 .d-padding-right24 padding-right: 2.4rem !important;
.d-pr32 .d-padding-right32 padding-right: 3.2rem !important;
.d-pr48 .d-padding-right48 padding-right: 4.8rem !important;
.d-pr64 .d-padding-right64 padding-right: 6.4rem !important;
.d-pb0 .d-padding-bottom0 padding-bottom: 0 !important;
.d-pb1 .d-padding-bottom1 padding-bottom: .1rem !important;
.d-pb2 .d-padding-bottom2 padding-bottom: .2rem !important;
.d-pb4 .d-padding-bottom4 padding-bottom: .4rem !important;
.d-pb6 .d-padding-bottom6 padding-bottom: .6rem !important;
.d-pb8 .d-padding-bottom8 padding-bottom: .8rem !important;
.d-pb12 .d-padding-bottom12 padding-bottom: 1.2rem !important;
.d-pb16 .d-padding-bottom16 padding-bottom: 1.6rem !important;
.d-pb24 .d-padding-bottom24 padding-bottom: 2.4rem !important;
.d-pb32 .d-padding-bottom32 padding-bottom: 3.2rem !important;
.d-pb48 .d-padding-bottom48 padding-bottom: 4.8rem !important;
.d-pb64 .d-padding-bottom64 padding-bottom: 6.4rem !important;
.d-pl0 .d-padding-left0 padding-left: 0 !important;
.d-pl1 .d-padding-left1 padding-left: .1rem !important;
.d-pl2 .d-padding-left2 padding-left: .2rem !important;
.d-pl4 .d-padding-left4 padding-left: .4rem !important;
.d-pl6 .d-padding-left6 padding-left: .6rem !important;
.d-pl8 .d-padding-left8 padding-left: .8rem !important;
.d-pl12 .d-padding-left12 padding-left: 1.2rem !important;
.d-pl16 .d-padding-left16 padding-left: 1.6rem !important;
.d-pl24 .d-padding-left24 padding-left: 2.4rem !important;
.d-pl32 .d-padding-left32 padding-left: 3.2rem !important;
.d-pl48 .d-padding-left48 padding-left: 4.8rem !important;
.d-pl64 .d-padding-left64 padding-left: 6.4rem !important;
.d-px0 .d-padding-x0 padding-right: 0 !important;
padding-left: 0 !important;
.d-px1 .d-padding-x1 padding-right: .1rem !important;
padding-left: .1rem !important;
.d-px2 .d-padding-x2 padding-right: .2rem !important;
padding-left: .2rem !important;
.d-px4 .d-padding-x4 padding-right: .4rem !important;
padding-left: .4rem !important;
.d-px6 .d-padding-x6 padding-right: .6rem !important;
padding-left: .6rem !important;
.d-px8 .d-padding-x8 padding-right: .8rem !important;
padding-left: .8rem !important;
.d-px12 .d-padding-x12 padding-right: 1.2rem !important;
padding-left: 1.2rem !important;
.d-px16 .d-padding-x16 padding-right: 1.6rem !important;
padding-left: 1.6rem !important;
.d-px24 .d-padding-x24 padding-right: 2.4rem !important;
padding-left: 2.4rem !important;
.d-px32 .d-padding-x32 padding-right: 3.2rem !important;
padding-left: 3.2rem !important;
.d-px48 .d-padding-x48 padding-right: 4.8rem !important;
padding-left: 4.8rem !important;
.d-px64 .d-padding-x64 padding-right: 6.4rem !important;
padding-left: 6.4rem !important;
.d-py0 .d-padding-y0 padding-top: 0 !important;
padding-bottom: 0 !important;
.d-py1 .d-padding-y1 padding-top: .1rem !important;
padding-bottom: .1rem !important;
.d-py2 .d-padding-y2 padding-top: .2rem !important;
padding-bottom: .2rem !important;
.d-py4 .d-padding-y4 padding-top: .4rem !important;
padding-bottom: .4rem !important;
.d-py6 .d-padding-y6 padding-top: .6rem !important;
padding-bottom: .6rem !important;
.d-py8 .d-padding-y8 padding-top: .8rem !important;
padding-bottom: .8rem !important;
.d-py12 .d-padding-y12 padding-top: 1.2rem !important;
padding-bottom: 1.2rem !important;
.d-py16 .d-padding-y16 padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
.d-py24 .d-padding-y24 padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
.d-py32 .d-padding-y32 padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
.d-py48 .d-padding-y48 padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
.d-py64 .d-padding-y64 padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;

Examples

.d-p8
.d-pt8
.d-pr8
.d-pb8
.d-pl8
.d-px8
.d-py8
<div class="d-p8"></div>
<div class="d-pt8"></div>
<div class="d-pr8"></div>
<div class="d-pb8"></div>
<div class="d-pl8"></div>
<div class="d-px8"></div>
<div class="d-py8"></div>

Reset Padding

Unsetting padding resets an element's padding to its initial value.

Class Output
.d-p-unset padding: unset !important;
.d-pt-unset padding-top: unset !important;
.d-pr-unset padding-right: unset !important;
.d-pb-unset padding-bottom: unset !important;
.d-pl-unset padding-left: unset !important;
.d-px-unset padding-right: unset !important;
padding-left: unset !important;
.d-py-unset padding-top: unset !important;
padding-bottom: unset !important;