Padding

Utilities for controlling an element's padding.

Class Properties
.pa0 padding: 0;
.pa1 padding: 0.25rem;
.pa2 padding: 0.5rem;
.pa3 padding: 0.75rem;
.pa4 padding: 1rem;
.pa5 padding: 1.25rem;
.pa6 padding: 1.5rem;
.pa8 padding: 2rem;
.pa10 padding: 2.5rem;
.pa12 padding: 3rem;
.pa16 padding: 4rem;
.pa20 padding: 5rem;
.pa24 padding: 6rem;
.pa32 padding: 8rem;
.pa40 padding: 10rem;
.pa48 padding: 12rem;
.pa64 padding: 16rem;
.pa80 padding: 20rem;
.pa96 padding: 24rem;
.pa128 padding: 32rem;
.pa160 padding: 40rem;
.pa192 padding: 48rem;
.pa256 padding: 64rem;
.pa320 padding: 80rem;
.pa384 padding: 96rem;
.pa512 padding: 128rem;
.pa640 padding: 160rem;
.pa768 padding: 192rem;
.px0 padding-left: 0; padding-right: 0;
.px1 padding-left: 0.25rem; padding-right: 0.25rem;
.px2 padding-left: 0.5rem; padding-right: 0.5rem;
.px3 padding-left: 0.75rem; padding-right: 0.75rem;
.px4 padding-left: 1rem; padding-right: 1rem;
.px5 padding-left: 1.25rem; padding-right: 1.25rem;
.px6 padding-left: 1.5rem; padding-right: 1.5rem;
.px8 padding-left: 2rem; padding-right: 2rem;
.px10 padding-left: 2.5rem; padding-right: 2.5rem;
.px12 padding-left: 3rem; padding-right: 3rem;
.px16 padding-left: 4rem; padding-right: 4rem;
.px20 padding-left: 5rem; padding-right: 5rem;
.px24 padding-left: 6rem; padding-right: 6rem;
.px32 padding-left: 8rem; padding-right: 8rem;
.px40 padding-left: 10rem; padding-right: 10rem;
.px48 padding-left: 12rem; padding-right: 12rem;
.px64 padding-left: 16rem; padding-right: 16rem;
.px80 padding-left: 20rem; padding-right: 20rem;
.px96 padding-left: 24rem; padding-right: 24rem;
.px128 padding-left: 32rem; padding-right: 32rem;
.px160 padding-left: 40rem; padding-right: 40rem;
.px192 padding-left: 48rem; padding-right: 48rem;
.px256 padding-left: 64rem; padding-right: 64rem;
.px320 padding-left: 80rem; padding-right: 80rem;
.px384 padding-left: 96rem; padding-right: 96rem;
.px512 padding-left: 128rem; padding-right: 128rem;
.px640 padding-left: 160rem; padding-right: 160rem;
.px768 padding-left: 192rem; padding-right: 192rem;
.py0 padding-top: 0; padding-bottom: 0;
.py1 padding-top: 0.25rem; padding-bottom: 0.25rem;
.py2 padding-top: 0.5rem; padding-bottom: 0.5rem;
.py3 padding-top: 0.75rem; padding-bottom: 0.75rem;
.py4 padding-top: 1rem; padding-bottom: 1rem;
.py5 padding-top: 1.25rem; padding-bottom: 1.25rem;
.py6 padding-top: 1.5rem; padding-bottom: 1.5rem;
.py8 padding-top: 2rem; padding-bottom: 2rem;
.py10 padding-top: 2.5rem; padding-bottom: 2.5rem;
.py12 padding-top: 3rem; padding-bottom: 3rem;
.py16 padding-top: 4rem; padding-bottom: 4rem;
.py20 padding-top: 5rem; padding-bottom: 5rem;
.py24 padding-top: 6rem; padding-bottom: 6rem;
.py32 padding-top: 8rem; padding-bottom: 8rem;
.py40 padding-top: 10rem; padding-bottom: 10rem;
.py48 padding-top: 12rem; padding-bottom: 12rem;
.py64 padding-top: 16rem; padding-bottom: 16rem;
.py80 padding-top: 20rem; padding-bottom: 20rem;
.py96 padding-top: 24rem; padding-bottom: 24rem;
.py128 padding-top: 32rem; padding-bottom: 32rem;
.py160 padding-top: 40rem; padding-bottom: 40rem;
.py192 padding-top: 48rem; padding-bottom: 48rem;
.py256 padding-top: 64rem; padding-bottom: 64rem;
.py320 padding-top: 80rem; padding-bottom: 80rem;
.py384 padding-top: 96rem; padding-bottom: 96rem;
.py512 padding-top: 128rem; padding-bottom: 128rem;
.py640 padding-top: 160rem; padding-bottom: 160rem;
.py768 padding-top: 192rem; padding-bottom: 192rem;
.pt0 padding-top: 0;
.pt1 padding-top: 0.25rem;
.pt2 padding-top: 0.5rem;
.pt3 padding-top: 0.75rem;
.pt4 padding-top: 1rem;
.pt5 padding-top: 1.25rem;
.pt6 padding-top: 1.5rem;
.pt8 padding-top: 2rem;
.pt10 padding-top: 2.5rem;
.pt12 padding-top: 3rem;
.pt16 padding-top: 4rem;
.pt20 padding-top: 5rem;
.pt24 padding-top: 6rem;
.pt32 padding-top: 8rem;
.pt40 padding-top: 10rem;
.pt48 padding-top: 12rem;
.pt64 padding-top: 16rem;
.pt80 padding-top: 20rem;
.pt96 padding-top: 24rem;
.pt128 padding-top: 32rem;
.pt160 padding-top: 40rem;
.pt192 padding-top: 48rem;
.pt256 padding-top: 64rem;
.pt320 padding-top: 80rem;
.pt384 padding-top: 96rem;
.pt512 padding-top: 128rem;
.pt640 padding-top: 160rem;
.pt768 padding-top: 192rem;
.pr0 padding-right: 0;
.pr1 padding-right: 0.25rem;
.pr2 padding-right: 0.5rem;
.pr3 padding-right: 0.75rem;
.pr4 padding-right: 1rem;
.pr5 padding-right: 1.25rem;
.pr6 padding-right: 1.5rem;
.pr8 padding-right: 2rem;
.pr10 padding-right: 2.5rem;
.pr12 padding-right: 3rem;
.pr16 padding-right: 4rem;
.pr20 padding-right: 5rem;
.pr24 padding-right: 6rem;
.pr32 padding-right: 8rem;
.pr40 padding-right: 10rem;
.pr48 padding-right: 12rem;
.pr64 padding-right: 16rem;
.pr80 padding-right: 20rem;
.pr96 padding-right: 24rem;
.pr128 padding-right: 32rem;
.pr160 padding-right: 40rem;
.pr192 padding-right: 48rem;
.pr256 padding-right: 64rem;
.pr320 padding-right: 80rem;
.pr384 padding-right: 96rem;
.pr512 padding-right: 128rem;
.pr640 padding-right: 160rem;
.pr768 padding-right: 192rem;
.pb0 padding-bottom: 0;
.pb1 padding-bottom: 0.25rem;
.pb2 padding-bottom: 0.5rem;
.pb3 padding-bottom: 0.75rem;
.pb4 padding-bottom: 1rem;
.pb5 padding-bottom: 1.25rem;
.pb6 padding-bottom: 1.5rem;
.pb8 padding-bottom: 2rem;
.pb10 padding-bottom: 2.5rem;
.pb12 padding-bottom: 3rem;
.pb16 padding-bottom: 4rem;
.pb20 padding-bottom: 5rem;
.pb24 padding-bottom: 6rem;
.pb32 padding-bottom: 8rem;
.pb40 padding-bottom: 10rem;
.pb48 padding-bottom: 12rem;
.pb64 padding-bottom: 16rem;
.pb80 padding-bottom: 20rem;
.pb96 padding-bottom: 24rem;
.pb128 padding-bottom: 32rem;
.pb160 padding-bottom: 40rem;
.pb192 padding-bottom: 48rem;
.pb256 padding-bottom: 64rem;
.pb320 padding-bottom: 80rem;
.pb384 padding-bottom: 96rem;
.pb512 padding-bottom: 128rem;
.pb640 padding-bottom: 160rem;
.pb768 padding-bottom: 192rem;
.pl0 padding-left: 0;
.pl1 padding-left: 0.25rem;
.pl2 padding-left: 0.5rem;
.pl3 padding-left: 0.75rem;
.pl4 padding-left: 1rem;
.pl5 padding-left: 1.25rem;
.pl6 padding-left: 1.5rem;
.pl8 padding-left: 2rem;
.pl10 padding-left: 2.5rem;
.pl12 padding-left: 3rem;
.pl16 padding-left: 4rem;
.pl20 padding-left: 5rem;
.pl24 padding-left: 6rem;
.pl32 padding-left: 8rem;
.pl40 padding-left: 10rem;
.pl48 padding-left: 12rem;
.pl64 padding-left: 16rem;
.pl80 padding-left: 20rem;
.pl96 padding-left: 24rem;
.pl128 padding-left: 32rem;
.pl160 padding-left: 40rem;
.pl192 padding-left: 48rem;
.pl256 padding-left: 64rem;
.pl320 padding-left: 80rem;
.pl384 padding-left: 96rem;
.pl512 padding-left: 128rem;
.pl640 padding-left: 160rem;
.pl768 padding-left: 192rem;

Padding in all directions

Use .pa{step} to set an element's padding.

Box with padding in all directions

Horizontal padding

Use .px{step} to set padding on the x-axis.

Box with horizontal padding

Vertical padding

Use .py{step} to set padding on the y-axis.

Box with vertical padding

Top

Use .pt{step} to set an element's top padding.

Box with top padding

Right

Use .pr{step} to set an element's right padding.

Box with right padding

Bottom

Use .pb{step} to set an element's bottom padding.

Box with bottom padding

Left

Use .pb{step} to set an element's left padding.

Box with left padding

Responsive

To control the padding of an element at a specific breakpoint, add @{breakpoint} at the end to the utility class.

Resize browser window to see the effect

Customization

All padding values can be set up in the map $scale: (...) in _settings.scss.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.