Dialtone

Padding

Utilities for setting an element's interior spacing between child elements and the element's box edge.

Classes

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

ClassOutput
.d-p0padding: 0 !important
.d-p1padding: .1rem !important
.d-p2padding: .2rem !important
.d-p4padding: .4rem !important
.d-p6padding: .6rem !important
.d-p8padding: .8rem !important
.d-p12padding: 1.2rem !important
.d-p16padding: 1.6rem !important
.d-p24padding: 2.4rem !important
.d-p32padding: 3.2rem !important
.d-p48padding: 4.8rem !important
.d-p64padding: 6.4rem !important
.d-p72padding: 7.2rem !important
.d-p84padding: 8.4rem !important
.d-p96padding: 9.6rem !important
.d-p102padding: 10.2rem !important
.d-p114padding: 11.4rem !important
.d-p128padding: 12.8rem !important
.d-pt0padding-top: 0 !important;
.d-pt1padding-top: .1rem !important;
.d-pt2padding-top: .2rem !important;
.d-pt4padding-top: .4rem !important;
.d-pt6padding-top: .6rem !important;
.d-pt8padding-top: .8rem !important;
.d-pt12padding-top: 1.2rem !important;
.d-pt16padding-top: 1.6rem !important;
.d-pt24padding-top: 2.4rem !important;
.d-pt32padding-top: 3.2rem !important;
.d-pt48padding-top: 4.8rem !important;
.d-pt64padding-top: 6.4rem !important;
.d-pt72padding-top: 7.2rem !important;
.d-pt84padding-top: 8.4rem !important;
.d-pt96padding-top: 9.6rem !important;
.d-pt102padding-top: 10.2rem !important;
.d-pt114padding-top: 11.4rem !important;
.d-pt128padding-top: 12.8rem !important;
.d-pr0padding-right: 0 !important;
.d-pr1padding-right: .1rem !important;
.d-pr2padding-right: .2rem !important;
.d-pr4padding-right: .4rem !important;
.d-pr6padding-right: .6rem !important;
.d-pr8padding-right: .8rem !important;
.d-pr12padding-right: 1.2rem !important;
.d-pr16padding-right: 1.6rem !important;
.d-pr24padding-right: 2.4rem !important;
.d-pr32padding-right: 3.2rem !important;
.d-pr48padding-right: 4.8rem !important;
.d-pr64padding-right: 6.4rem !important;
.d-pr72padding-right: 7.2rem !important;
.d-pr84padding-right: 8.4rem !important;
.d-pr96padding-right: 9.6rem !important;
.d-pr102padding-right: 10.2rem !important;
.d-pr114padding-right: 11.4rem !important;
.d-pr128padding-right: 12.8rem !important;
.d-pb0padding-bottom: 0 !important;
.d-pb1padding-bottom: .1rem !important;
.d-pb2padding-bottom: .2rem !important;
.d-pb4padding-bottom: .4rem !important;
.d-pb6padding-bottom: .6rem !important;
.d-pb8padding-bottom: .8rem !important;
.d-pb12padding-bottom: 1.2rem !important;
.d-pb16padding-bottom: 1.6rem !important;
.d-pb24padding-bottom: 2.4rem !important;
.d-pb32padding-bottom: 3.2rem !important;
.d-pb48padding-bottom: 4.8rem !important;
.d-pb64padding-bottom: 6.4rem !important;
.d-pb72padding-bottom: 7.2rem !important;
.d-pb84padding-bottom: 8.4rem !important;
.d-pb96padding-bottom: 9.6rem !important;
.d-pb102padding-bottom: 10.2rem !important;
.d-pb114padding-bottom: 11.4rem !important;
.d-pb128padding-bottom: 12.8rem !important;
.d-pl0padding-left: 0 !important;
.d-pl1padding-left: .1rem !important;
.d-pl2padding-left: .2rem !important;
.d-pl4padding-left: .4rem !important;
.d-pl6padding-left: .6rem !important;
.d-pl8padding-left: .8rem !important;
.d-pl12padding-left: 1.2rem !important;
.d-pl16padding-left: 1.6rem !important;
.d-pl24padding-left: 2.4rem !important;
.d-pl32padding-left: 3.2rem !important;
.d-pl48padding-left: 4.8rem !important;
.d-pl64padding-left: 6.4rem !important;
.d-pl72padding-left: 7.2rem !important;
.d-pl84padding-left: 8.4rem !important;
.d-pl96padding-left: 9.6rem !important;
.d-pl102padding-left: 10.2rem !important;
.d-pl114padding-left: 11.4rem !important;
.d-pl128padding-left: 12.8rem !important;
.d-px0 padding-right: 0 !important;
padding-left: 0 !important;
.d-px1 padding-right: .1rem !important;
padding-left: .1rem !important;
.d-px2 padding-right: .2rem !important;
padding-left: .2rem !important;
.d-px4 padding-right: .4rem !important;
padding-left: .4rem !important;
.d-px6 padding-right: .6rem !important;
padding-left: .6rem !important;
.d-px8 padding-right: .8rem !important;
padding-left: .8rem !important;
.d-px12 padding-right: 1.2rem !important;
padding-left: 1.2rem !important;
.d-px16 padding-right: 1.6rem !important;
padding-left: 1.6rem !important;
.d-px24 padding-right: 2.4rem !important;
padding-left: 2.4rem !important;
.d-px32 padding-right: 3.2rem !important;
padding-left: 3.2rem !important;
.d-px48 padding-right: 4.8rem !important;
padding-left: 4.8rem !important;
.d-px64 padding-right: 6.4rem !important;
padding-left: 6.4rem !important;
.d-px72 padding-right: 7.2rem !important;
padding-left: 7.2rem !important;
.d-px84 padding-right: 8.4rem !important;
padding-left: 8.4rem !important;
.d-px96 padding-right: 9.6rem !important;
padding-left: 9.6rem !important;
.d-px102 padding-right: 10.2rem !important;
padding-left: 10.2rem !important;
.d-px114 padding-right: 11.4rem !important;
padding-left: 11.4rem !important;
.d-px128 padding-right: 12.8rem !important;
padding-left: 12.8rem !important;
.d-py0 padding-top: 0 !important;
padding-bottom: 0 !important;
.d-py1 padding-top: .1rem !important;
padding-bottom: .1rem !important;
.d-py2 padding-top: .2rem !important;
padding-bottom: .2rem !important;
.d-py4 padding-top: .4rem !important;
padding-bottom: .4rem !important;
.d-py6 padding-top: .6rem !important;
padding-bottom: .6rem !important;
.d-py8 padding-top: .8rem !important;
padding-bottom: .8rem !important;
.d-py12 padding-top: 1.2rem !important;
padding-bottom: 1.2rem !important;
.d-py16 padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
.d-py24 padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
.d-py32 padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
.d-py48 padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
.d-py64 padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
.d-py72 padding-top: 7.2rem !important;
padding-bottom: 7.2rem !important;
.d-py84 padding-top: 8.4rem !important;
padding-bottom: 8.4rem !important;
.d-py96 padding-top: 9.6rem !important;
padding-bottom: 9.6rem !important;
.d-py102 padding-top: 10.2rem !important;
padding-bottom: 10.2rem !important;
.d-py114 padding-top: 11.4rem !important;
padding-bottom: 11.4rem !important;
.d-py128 padding-top: 12.8rem !important;
padding-bottom: 12.8rem !important;
.d-p-unsetpadding: unset !important
.d-pt-unsetpadding-top: unset !important;
.d-pr-unsetpadding-right: unset !important;
.d-pb-unsetpadding-bottom: unset !important;
.d-pl-unsetpadding-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;

Add padding to all sides

<div class="d-p8 ...">d-p8</div>

Add padding to a single side

<div class="d-pt12 ...">d-pt12</div>
<div class="d-pr16 ...">d-pr16</div>
<div class="d-pb24 ...">d-pb24</div>
<div class="d-pl32 ...">d-pl32</div>

Add horizontal padding

<div class="d-px24 ...">d-px24</div>

Add vertical padding

<div class="d-py24 ...">d-py24</div>
Last Updated: