Spacing
Utilities for controlling an element's padding.
Class | Styles |
---|---|
p-<number> | padding: calc(var(--spacing) * <number>); |
p-(<custom-property>) | padding: var(<custom-property>); |
p-[<value>] | padding: <value>; |
px-<number> | padding-inline: calc(var(--spacing) * <number>); |
px-(<custom-property>) | padding-inline: var(<custom-property>); |
px-[<value>] | padding-inline: <value>; |
py-<number> | padding-block: calc(var(--spacing) * <number>); |
py-(<custom-property>) | padding-block: var(<custom-property>); |
py-[<value>] | padding-block: <value>; |
ps-<number> | padding-inline-start: calc(var(--spacing) * <number>); |
ps-(<custom-property>) | padding-inline-start: var(<custom-property>); |
ps-[<value>] | padding-inline-start: <value>; |
pe-<number> | padding-inline-end: calc(var(--spacing) * <number>); |
pe-(<custom-property>) | padding-inline-end: var(<custom-property>); |
pe-[<value>] | padding-inline-end: <value>; |
pt-<number> | padding-top: calc(var(--spacing) * <number>); |
pt-(<custom-property>) | padding-top: var(<custom-property>); |
pt-[<value>] | padding-top: <value>; |
pr-<number> | padding-right: calc(var(--spacing) * <number>); |
pr-(<custom-property>) | padding-right: var(<custom-property>); |
pr-[<value>] | padding-right: <value>; |
pb-<number> | padding-bottom: calc(var(--spacing) * <number>); |
pb-(<custom-property>) | padding-bottom: var(<custom-property>); |
pb-[<value>] | padding-bottom: <value>; |
pl-<number> | padding-left: calc(var(--spacing) * <number>); |
pl-(<custom-property>) | padding-left: var(<custom-property>); |
pl-[<value>] | padding-left: <value>; |
Use p-<number>
utilities like p-4
and p-8
to control the padding on all sides of an element:
Use pt-<number>
, pr-<number>
, pb-<number>
, and pl-<number>
utilities like pt-6
and pr-4
to control the padding on one side of an element:
Use px-<number>
utilities like px-4
and px-8
to control the horizontal padding of an element:
Use py-<number>
utilities like py-4
and py-8
to control the vertical padding of an element:
Use ps-<number>
and pe-<number>
utilities like ps-4
and pe-8
to set the padding-inline-start
and padding-inline-end
logical properties, which map to either the left or right side based on the text direction:
For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.
Use utilities like p-[<value>]
,px-[<value>]
, and pb-[<value>]
to set the padding based on a completely custom value:
<div class="p-[5px] ..."> <!-- ... --></div>
For CSS variables, you can also use the p-(<custom-property>)
syntax:
<div class="p-(--my-padding) ..."> <!-- ... --></div>
This is just a shorthand for p-[var(<custom-property>)]
that adds the var()
function for you automatically.
Prefix a padding
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="py-4 md:py-8 ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.
The p-<number>
,px-<number>
,py-<number>
,ps-<number>
,pe-<number>
,pt-<number>
,pr-<number>
,pb-<number>
, and pl-<number>
utilities are driven by the --spacing
theme variable, which can be customized in your own theme:
@theme { --spacing: 1px; }
Learn more about customizing the spacing scale in the theme variable documentation.