- Spacing
- Padding
Spacing
padding
Utilities for controlling an element's padding.
| Class | Styles |
|---|---|
p-<number> | padding: calc(var(--spacing) * <number>); |
px-<number> | padding-inline: calc(var(--spacing) * <number>); |
py-<number> | padding-block: calc(var(--spacing) * <number>); |
ps-<number> | padding-inline-start: calc(var(--spacing) * <number>) |
pe-<number> | padding-inline-end: calc(var(--spacing) * <number>) |
pt-<number> | padding-top: calc(var(--spacing) * <number>) |
pr-<number> | padding-right: calc(var(--spacing) * <number>) |
pb-<number> | padding-bottom: calc(var(--spacing) * <number>) |
pl-<number> | padding-left: calc(var(--spacing) * <number>) |
p-(<custom-property>) | padding: var(<custom-property>); |
p-[<value>] | padding: <value>; |
Examples
Add padding to a single side
Use the pt-*, pr-*, pb-*, and pl-* utilities to control the padding on one side of an element.
For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.
<div class="pt-6 ...">pt-6</div><div class="pr-4 ...">pr-4</div><div class="pb-8 ...">pb-8</div><div class="pl-2 ...">pl-2</div>Add horizontal padding
Use the px-* utilities to control the horizontal padding of an element:
<div class="px-8 ...">px-8</div>Add vertical padding
Use the py-* utilities to control the vertical padding of an element:
<div class="py-8 ...">py-8</div>Add padding to all sides
Use the p-* utilities to control the padding on all sides of an element:
<div class="p-8 ...">p-8</div>Using logical properties
Use the ps-* and pe-* utilities to set the padding-inline-start and padding-inline-end logical properties:
Left-to-right
Right-to-left
<div dir="ltr"> <div class="ps-8 ...">ps-8</div> <div class="pe-8 ...">pe-8</div> <div> <div dir="rtl"> <div class="ps-8 ...">ps-8</div> <div class="pe-8 ...">pe-8</div> <div></div> </div> </div></div>Referencing a variable
Use the padding-(<custom-property>) syntax to set the padding based on a custom property:
<div class="padding-(--my-padding) ..."> <!-- ... --></div>Using a custom value
Use the padding-[<value>] syntax to set the padding based on a completely custom value:
<div class="padding-[5px] ..."> <!-- ... --></div>Responsive design
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.
Customizing your theme
Use the --padding-* theme variables to customize the padding utilities in your project:
@theme { --padding-5px: 5px; }Now the padding-5px utility can be used in your markup:
<div class="padding-5px"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.
