Padding

Spacing inside elements

Assemble combinations of these spacing utilities to add or remove space. You can start with medium — and then increase or decrease as needed. No more magic numbers and pixel nudging, all the elements on your page will line up when you stick to this ratio based scale.

Class	Declaration
pa0	`padding: 0;`
paxs	`padding: .25rem;`
pas	`padding: .5rem;`
pam	`padding: 1rem;`
pal	`padding: 2rem;`
paxl	`padding: 4rem;`
ph0	`padding-left: 0; padding-right: 0;`
phxs	`padding-left: .25rem; padding-right: .25rem;`
phs	`padding-left: .5rem; padding-right: .5rem;`
phm	`padding-left: 1rem; padding-right: 1rem;`
phl	`padding-left: 2rem; padding-right: 2rem;`
phxl	`padding-left: 4rem; padding-right: 4rem;`
pv0	`padding-top: 0; padding-bottom: 0;`
pvxs	`padding-top: .25rem; padding-bottom: .25rem;`
pvs	`padding-top: .5rem; padding-bottom: .5rem;`
pvm	`padding-top: 1rem; padding-bottom: 1rem;`
pvl	`padding-top: 2rem; padding-bottom: 2rem;`
pvxl	`padding-top: 4rem; padding-bottom: 4rem;`
pl0	`padding-left: 0;`
plxs	`padding-left: .25rem;`
pls	`padding-left: .5rem;`
plm	`padding-left: 1rem;`
pll	`padding-left: 2rem;`
plxl	`padding-left: 4rem;`
pr0	`padding-right: 0;`
prxs	`padding-right: .25rem;`
prs	`padding-right: .5rem;`
prm	`padding-right: 1rem;`
prl	`padding-right: 2rem;`
prxl	`padding-right: 4rem;`
pb0	`padding-bottom: 0;`
pbxs	`padding-bottom: .25rem;`
pbs	`padding-bottom: .5rem;`
pbm	`padding-bottom: 1rem;`
pbl	`padding-bottom: 2rem;`
pbxl	`padding-bottom: 4rem;`
pt0	`padding-top: 0;`
ptxs	`padding-top: .25rem;`
pts	`padding-top: .5rem;`
ptm	`padding-top: 1rem;`
ptl	`padding-top: 2rem;`
ptxl	`padding-top: 4rem;`

p: padding
a: all
h: horizontal
v: vertical
t: top
r: right
b: bottom
l: left

Learn more about spacing

Tachyons: Excellent text about working with spacing
MDN web docs: Introduction to the CSS box model
MDN web docs: Mastering margin collapsing