spacing

padding

Utilities for controlling an element's padding.

Overview

These are fluid <sizes>-based utilities.

ClassStyle
p-<size>padding: var(--size-<size>);
py-<size>padding-block: var(--size-<size>);
px-<size>padding-inline: var(--size-<size>);
pt-<size>padding-top: var(--size-<size>);
pr-<size>padding-right: var(--size-<size>);
pb-<size>padding-bottom: var(--size-<size>);
pl-<size>padding-left: var(--size-<size>);
In Depth
ClassStyle
p-autopadding: var(--size-auto);
p-zeropadding: var(--size-zero);
p-3xspadding: var(--size-3xs);
p-2xspadding: var(--size-2xs);
p-xspadding: var(--size-xs);
p-smpadding: var(--size-sm);
p-mdpadding: var(--size-md);
p-mlpadding: var(--size-ml);
p-lgpadding: var(--size-lg);
p-xlpadding: var(--size-xl);
p-2xlpadding: var(--size-2xl);
p-3xlpadding: var(--size-3xl);
p-4xlpadding: var(--size-4xl);
p-5xlpadding: var(--size-5xl);
p-6xlpadding: var(--size-6xl);
p-7xlpadding: var(--size-7xl);
p-8xlpadding: var(--size-8xl);
p-9xlpadding: var(--size-9xl);
p-10xlpadding: var(--size-10xl);
p-maxpadding: var(--size-max);
ClassStyle
py-autopadding-block: var(--size-auto);
py-zeropadding-block: var(--size-zero);
py-3xspadding-block: var(--size-3xs);
py-2xspadding-block: var(--size-2xs);
py-xspadding-block: var(--size-xs);
py-smpadding-block: var(--size-sm);
py-mdpadding-block: var(--size-md);
py-mlpadding-block: var(--size-ml);
py-lgpadding-block: var(--size-lg);
py-xlpadding-block: var(--size-xl);
py-2xlpadding-block: var(--size-2xl);
py-3xlpadding-block: var(--size-3xl);
py-4xlpadding-block: var(--size-4xl);
py-5xlpadding-block: var(--size-5xl);
py-6xlpadding-block: var(--size-6xl);
py-7xlpadding-block: var(--size-7xl);
py-8xlpadding-block: var(--size-8xl);
py-9xlpadding-block: var(--size-9xl);
py-10xlpadding-block: var(--size-10xl);
py-maxpadding-block: var(--size-max);
ClassStyle
px-autopadding-inline: var(--size-auto);
px-zeropadding-inline: var(--size-zero);
px-3xspadding-inline: var(--size-3xs);
px-2xspadding-inline: var(--size-2xs);
px-xspadding-inline: var(--size-xs);
px-smpadding-inline: var(--size-sm);
px-mdpadding-inline: var(--size-md);
px-mlpadding-inline: var(--size-ml);
px-lgpadding-inline: var(--size-lg);
px-xlpadding-inline: var(--size-xl);
px-2xlpadding-inline: var(--size-2xl);
px-3xlpadding-inline: var(--size-3xl);
px-4xlpadding-inline: var(--size-4xl);
px-5xlpadding-inline: var(--size-5xl);
px-6xlpadding-inline: var(--size-6xl);
px-7xlpadding-inline: var(--size-7xl);
px-8xlpadding-inline: var(--size-8xl);
px-9xlpadding-inline: var(--size-9xl);
px-10xlpadding-inline: var(--size-10xl);
px-maxpadding-inline: var(--size-max);
ClassStyle
pt-autopadding-top: var(--size-auto);
pt-zeropadding-top: var(--size-zero);
pt-3xspadding-top: var(--size-3xs);
pt-2xspadding-top: var(--size-2xs);
pt-xspadding-top: var(--size-xs);
pt-smpadding-top: var(--size-sm);
pt-mdpadding-top: var(--size-md);
pt-mlpadding-top: var(--size-ml);
pt-lgpadding-top: var(--size-lg);
pt-xlpadding-top: var(--size-xl);
pt-2xlpadding-top: var(--size-2xl);
pt-3xlpadding-top: var(--size-3xl);
pt-4xlpadding-top: var(--size-4xl);
pt-5xlpadding-top: var(--size-5xl);
pt-6xlpadding-top: var(--size-6xl);
pt-7xlpadding-top: var(--size-7xl);
pt-8xlpadding-top: var(--size-8xl);
pt-9xlpadding-top: var(--size-9xl);
pt-10xlpadding-top: var(--size-10xl);
pt-maxpadding-top: var(--size-max);
ClassStyle
pr-autopadding-right: var(--size-auto);
pr-zeropadding-right: var(--size-zero);
pr-3xspadding-right: var(--size-3xs);
pr-2xspadding-right: var(--size-2xs);
pr-xspadding-right: var(--size-xs);
pr-smpadding-right: var(--size-sm);
pr-mdpadding-right: var(--size-md);
pr-mlpadding-right: var(--size-ml);
pr-lgpadding-right: var(--size-lg);
pr-xlpadding-right: var(--size-xl);
pr-2xlpadding-right: var(--size-2xl);
pr-3xlpadding-right: var(--size-3xl);
pr-4xlpadding-right: var(--size-4xl);
pr-5xlpadding-right: var(--size-5xl);
pr-6xlpadding-right: var(--size-6xl);
pr-7xlpadding-right: var(--size-7xl);
pr-8xlpadding-right: var(--size-8xl);
pr-9xlpadding-right: var(--size-9xl);
pr-10xlpadding-right: var(--size-10xl);
pr-maxpadding-right: var(--size-max);
ClassStyle
pb-autopadding-bottom: var(--size-auto);
pb-zeropadding-bottom: var(--size-zero);
pb-3xspadding-bottom: var(--size-3xs);
pb-2xspadding-bottom: var(--size-2xs);
pb-xspadding-bottom: var(--size-xs);
pb-smpadding-bottom: var(--size-sm);
pb-mdpadding-bottom: var(--size-md);
pb-mlpadding-bottom: var(--size-ml);
pb-lgpadding-bottom: var(--size-lg);
pb-xlpadding-bottom: var(--size-xl);
pb-2xlpadding-bottom: var(--size-2xl);
pb-3xlpadding-bottom: var(--size-3xl);
pb-4xlpadding-bottom: var(--size-4xl);
pb-5xlpadding-bottom: var(--size-5xl);
pb-6xlpadding-bottom: var(--size-6xl);
pb-7xlpadding-bottom: var(--size-7xl);
pb-8xlpadding-bottom: var(--size-8xl);
pb-9xlpadding-bottom: var(--size-9xl);
pb-10xlpadding-bottom: var(--size-10xl);
pb-maxpadding-bottom: var(--size-max);
ClassStyle
pl-autopadding-left: var(--size-auto);
pl-zeropadding-left: var(--size-zero);
pl-3xspadding-left: var(--size-3xs);
pl-2xspadding-left: var(--size-2xs);
pl-xspadding-left: var(--size-xs);
pl-smpadding-left: var(--size-sm);
pl-mdpadding-left: var(--size-md);
pl-mlpadding-left: var(--size-ml);
pl-lgpadding-left: var(--size-lg);
pl-xlpadding-left: var(--size-xl);
pl-2xlpadding-left: var(--size-2xl);
pl-3xlpadding-left: var(--size-3xl);
pl-4xlpadding-left: var(--size-4xl);
pl-5xlpadding-left: var(--size-5xl);
pl-6xlpadding-left: var(--size-6xl);
pl-7xlpadding-left: var(--size-7xl);
pl-8xlpadding-left: var(--size-8xl);
pl-9xlpadding-left: var(--size-9xl);
pl-10xlpadding-left: var(--size-10xl);
pl-maxpadding-left: var(--size-max);