Dialtone
GitHub Repo
Codepen Template

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: