Skip to main content
Version: 1.1

Padding

Utilities for controlling an element's padding.

NamespaceOutput
p-0{ padding: 0 }
p-1{ padding: 4 }
p-2{ padding: 8 }
p-3{ padding: 12 }
p-4{ padding: 16 }
p-5{ padding: 20 }
p-6{ padding: 24 }
p-7{ padding: 28 }
p-8{ padding: 32 }
p-9{ padding: 36 }
p-10{ padding: 40 }
p-12{ padding: 48 }
p-16{ padding: 64 }
p-20{ padding: 80 }
p-24{ padding: 96 }
p-32{ padding: 128 }
p-40{ padding: 160 }
p-48{ padding: 192 }
p-56{ padding: 224 }
p-64{ padding: 256 }
p-px{ padding: 2 }
py-0{ paddingTop: 0, paddingBottom: 0 }
py-1{ paddingTop: 4 , paddingBottom: 4 }
py-2{ paddingTop: 8 , paddingBottom: 8 }
py-3{ paddingTop: 12, paddingBottom: 12 }
py-4{ paddingTop: 16, paddingBottom: 16 }
py-5{ paddingTop: 20, paddingBottom: 20 }
py-6{ paddingTop: 24, paddingBottom: 24 }
py-7{ paddingTop: 28, paddingBottom: 28 }
py-8{ paddingTop: 32, paddingBottom: 32 }
py-9{ paddingTop: 36, paddingBottom: 36 }
py-10{ paddingTop: 40, paddingBottom: 40 }
py-12{ paddingTop: 48, paddingBottom: 48 }
py-16{ paddingTop: 64, paddingBottom: 64 }
py-20{ paddingTop: 80, paddingBottom: 80 }
py-24{ paddingTop: 96, paddingBottom: 96 }
py-32{ paddingTop: 12, paddingBottom: 128 }
py-40{ paddingTop: 16, paddingBottom: 160 }
py-48{ paddingTop: 19, paddingBottom: 192 }
py-56{ paddingTop: 22, paddingBottom: 224 }
py-64{ paddingTop: 25, paddingBottom: 256 }
py-px{ paddingTop: 2, paddingBottom: 2}
px-0{ paddingRight: 0, paddingLeft: 0 }
px-1{ paddingRight: 4 , paddingLeft: 4 }
px-2{ paddingRight: 8 , paddingLeft: 8 }
px-3{ paddingRight: 12, paddingLeft: 12 }
px-4{ paddingRight: 16, paddingLeft: 16 }
px-5{ paddingRight: 20, paddingLeft: 20 }
px-6{ paddingRight: 24, paddingLeft: 24 }
px-7{ paddingRight: 28, paddingLeft: 28 }
px-8{ paddingRight: 32, paddingLeft: 32 }
px-9{ paddingRight: 36, paddingLeft: 36 }
px-10{ paddingRight: 40, paddingLeft: 40 }
px-12{ paddingRight: 48, paddingLeft: 48 }
px-16{ paddingRight: 64, paddingLeft: 64 }
px-20{ paddingRight: 80, paddingLeft: 80 }
px-24{ paddingRight: 96, paddingLeft: 96 }
px-32{ paddingRight: 12, paddingLeft: 128 }
px-40{ paddingRight: 16, paddingLeft: 160 }
px-48{ paddingRight: 19, paddingLeft: 192 }
px-56{ paddingRight: 22, paddingLeft: 224 }
px-64{ paddingRight: 25, paddingLeft: 256 }
px-px{ paddingRight: 2, paddingLeft: 2 }
pt-0{ paddingTop: 0 }
pt-1{ paddingTop: 4 }
pt-2{ paddingTop: 8 }
pt-3{ paddingTop: 12 }
pt-4{ paddingTop: 16 }
pt-5{ paddingTop: 20 }
pt-6{ paddingTop: 24 }
pt-7{ paddingTop: 28 }
pt-8{ paddingTop: 32 }
pt-9{ paddingTop: 36 }
pt-10{ paddingTop: 40 }
pt-12{ paddingTop: 48 }
pt-16{ paddingTop: 64 }
pt-20{ paddingTop: 80 }
pt-24{ paddingTop: 96 }
pt-32{ paddingTop: 128 }
pt-40{ paddingTop: 160 }
pt-48{ paddingTop: 192 }
pt-56{ paddingTop: 224 }
pt-64{ paddingTop: 256 }
pt-px{ paddingTop: 2 }
pr-0{ paddingRight: 0 }
pr-1{ paddingRight: 4 }
pr-2{ paddingRight: 8 }
pr-3{ paddingRight: 12 }
pr-4{ paddingRight: 16 }
pr-5{ paddingRight: 20 }
pr-6{ paddingRight: 24 }
pr-7{ paddingRight: 28 }
pr-8{ paddingRight: 32 }
pr-9{ paddingRight: 36 }
pr-10{ paddingRight: 40 }
pr-12{ paddingRight: 48 }
pr-16{ paddingRight: 64 }
pr-20{ paddingRight: 80 }
pr-24{ paddingRight: 96 }
pr-32{ paddingRight: 128 }
pr-40{ paddingRight: 160 }
pr-48{ paddingRight: 192 }
pr-56{ paddingRight: 224 }
pr-64{ paddingRight: 256 }
pr-px{ paddingRight: 2 }
pb-0{ paddingBottom: 0 }
pb-1{ paddingBottom: 4 }
pb-2{ paddingBottom: 8 }
pb-3{ paddingBottom: 12 }
pb-4{ paddingBottom: 16 }
pb-5{ paddingBottom: 20 }
pb-6{ paddingBottom: 24 }
pb-7{ paddingBottom: 28 }
pb-8{ paddingBottom: 32 }
pb-9{ paddingBottom: 36 }
pb-10{ paddingBottom: 40 }
pb-12{ paddingBottom: 48 }
pb-16{ paddingBottom: 64 }
pb-20{ paddingBottom: 80 }
pb-24{ paddingBottom: 96 }
pb-32{ paddingBottom: 128 }
pb-40{ paddingBottom: 160 }
pb-48{ paddingBottom: 192 }
pb-56{ paddingBottom: 224 }
pb-64{ paddingBottom: 256 }
pb-px{ paddingBottom: 2 }
pl-0{ paddingLeft: 0 }
pl-1{ paddingLeft: 4 }
pl-2{ paddingLeft: 8 }
pl-3{ paddingLeft: 12 }
pl-4{ paddingLeft: 16 }
pl-5{ paddingLeft: 20 }
pl-6{ paddingLeft: 24 }
pl-7{ paddingLeft: 28 }
pl-8{ paddingLeft: 32 }
pl-9{ paddingLeft: 36 }
pl-10{ paddingLeft: 40 }
pl-12{ paddingLeft: 48 }
pl-16{ paddingLeft: 64 }
pl-20{ paddingLeft: 80 }
pl-24{ paddingLeft: 96 }
pl-32{ paddingLeft: 128 }
pl-40{ paddingLeft: 160 }
pl-48{ paddingLeft: 192 }
pl-56{ paddingLeft: 224 }
pl-64{ paddingLeft: 256 }
pl-px{ paddingLeft: 2 }