Padding

Stacks provides atomic classes to override padding.

Padding

Immutable padding utilities are based on a global white space scale defined with custom properties. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.

Padding should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before use.

Padding class abbreviations

AbbreviationPropertyResponsive?
ppaddingYes
ptpadding-topYes
prpadding-rightYes
pbpadding-bottomYes
plpadding-leftYes
pxpadding x-axisYes
pypadding y-axisYes

Padding classes

<div class="pt4 pr64 pb64 pl64"></div>
Example div with different paddings applied
ClassOutputResponsive?
.p0padding: 0Yes
.p1padding: 1pxYes
.p2padding: 2pxYes
.p4padding: 4pxYes
.p6padding: 6pxYes
.p8padding: 8pxYes
.p12padding: 12pxYes
.p16padding: 16pxYes
.p24padding: 24pxYes
.p32padding: 32pxYes
.p48padding: 48pxYes
.p64padding: 64pxYes
.p96padding: 96pxYes
.p128padding: 128pxYes
.p50padding: 50%Yes
.p100padding: 100%Yes
.pt0padding-top: 0Yes
.pt1padding-top: 1pxYes
.pt2padding-top: 2pxYes
.pt4padding-top: 4pxYes
.pt6padding-top: 6pxYes
.pt8padding-top: 8pxYes
.pt12padding-top: 12pxYes
.pt16padding-top: 16pxYes
.pt24padding-top: 24pxYes
.pt32padding-top: 32pxYes
.pt48padding-top: 48pxYes
.pt64padding-top: 64pxYes
.pt96padding-top: 96pxYes
.pt128padding-top: 128pxYes
.pt50padding-top: 50%Yes
.pt100padding-top: 100%Yes
.pr0padding-right: 0Yes
.pr1padding-right: 1pxYes
.pr2padding-right: 2pxYes
.pr4padding-right: 4pxYes
.pr6padding-right: 6pxYes
.pr8padding-right: 8pxYes
.pr12padding-right: 12pxYes
.pr16padding-right: 16pxYes
.pr24padding-right: 24pxYes
.pr32padding-right: 32pxYes
.pr48padding-right: 48pxYes
.pr64padding-right: 64pxYes
.pr96padding-right: 96pxYes
.pr128padding-right: 128pxYes
.pr50padding-right: 50%Yes
.pr100padding-right: 100%Yes
.pb0padding-bottom: 0Yes
.pb1padding-bottom: 1pxYes
.pb2padding-bottom: 2pxYes
.pb4padding-bottom: 4pxYes
.pb6padding-bottom: 6pxYes
.pb8padding-bottom: 8pxYes
.pb12padding-bottom: 12pxYes
.pb16padding-bottom: 16pxYes
.pb24padding-bottom: 24pxYes
.pb32padding-bottom: 32pxYes
.pb48padding-bottom: 48pxYes
.pb64padding-bottom: 64pxYes
.pb96padding-bottom: 96pxYes
.pb128padding-bottom: 128pxYes
.pb50padding-bottom: 50%Yes
.pb100padding-bottom: 100%Yes
.pl0padding-left: 0Yes
.pl1padding-left: 1pxYes
.pl2padding-left: 2pxYes
.pl4padding-left: 4pxYes
.pl6padding-left: 6pxYes
.pl8padding-left: 8pxYes
.pl12padding-left: 12pxYes
.pl16padding-left: 16pxYes
.pl24padding-left: 24pxYes
.pl32padding-left: 32pxYes
.pl48padding-left: 48pxYes
.pl64padding-left: 64pxYes
.pl96padding-left: 96pxYes
.pl128padding-left: 128pxYes
.pl50padding-left: 50%Yes
.pl100padding-left: 100%Yes
.px1padding-left: 1px; padding-right: 1pxYes
.px2padding-left: 2px; padding-right: 2pxYes
.px4padding-left: 4px; padding-right: 4pxYes
.px6padding-left: 6px; padding-right: 6pxYes
.px8padding-left: 8px; padding-right: 8pxYes
.px12padding-left: 12px; padding-right: 12pxYes
.px16padding-left: 16px; padding-right: 16pxYes
.px24padding-left: 24px; padding-right: 24pxYes
.px32padding-left: 32px; padding-right: 32pxYes
.px48padding-left: 48px; padding-right: 48pxYes
.px64padding-left: 64px; padding-right: 64pxYes
.px96padding-left: 96px; padding-right: 96pxYes
.px128padding-left: 128px; padding-right: 128pxYes
.py1padding-top: 1px; padding-bottom: 1pxYes
.py2padding-top: 2px; padding-bottom: 2pxYes
.py4padding-top: 4px; padding-bottom: 4pxYes
.py6padding-top: 6px; padding-bottom: 6pxYes
.py8padding-top: 8px; padding-bottom: 8pxYes
.py12padding-top: 12px; padding-bottom: 12pxYes
.py16padding-top: 16px; padding-bottom: 16pxYes
.py24padding-top: 24px; padding-bottom: 24pxYes
.py32padding-top: 32px; padding-bottom: 32pxYes
.py48padding-top: 48px; padding-bottom: 48pxYes
.py64padding-top: 64px; padding-bottom: 64pxYes
.py96padding-top: 96px; padding-bottom: 96pxYes
.py128padding-top: 128px; padding-bottom: 128pxYes