Các tiện ích để kiểm soát padding của một phần tử.
| Class | Styles |
|---|---|
p-<number> | padding: calc(var(--spacing) * <number>); |
p-px | padding: 1px; |
p-(<custom-property>) | padding: var(<custom-property>); |
p-[<value>] | padding: <value>; |
px-<number> | padding-inline: calc(var(--spacing) * <number>); |
px-px | padding-inline: 1px; |
px-(<custom-property>) | padding-inline: var(<custom-property>); |
px-[<value>] | padding-inline: <value>; |
py-<number> | padding-block: calc(var(--spacing) * <number>); |
py-px | padding-block: 1px; |
py-(<custom-property>) | padding-block: var(<custom-property>); |
py-[<value>] | padding-block: <value>; |
ps-<number> | padding-inline-start: calc(var(--spacing) * <number>); |
ps-px | padding-inline-start: 1px; |
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-px | padding-inline-end: 1px; |
pe-(<custom-property>) | padding-inline-end: var(<custom-property>); |
pe-[<value>] | padding-inline-end: <value>; |
pt-<number> | padding-top: calc(var(--spacing) * <number>); |
pt-px | padding-top: 1px; |
pt-(<custom-property>) | padding-top: var(<custom-property>); |
pt-[<value>] | padding-top: <value>; |
pr-<number> | padding-right: calc(var(--spacing) * <number>); |
pr-px | padding-right: 1px; |
pr-(<custom-property>) | padding-right: var(<custom-property>); |
pr-[<value>] | padding-right: <value>; |
pb-<number> | padding-bottom: calc(var(--spacing) * <number>); |
pb-px | padding-bottom: 1px; |
pb-(<custom-property>) | padding-bottom: var(<custom-property>); |
pb-[<value>] | padding-bottom: <value>; |
pl-<number> | padding-left: calc(var(--spacing) * <number>); |
pl-px | padding-left: 1px; |
pl-(<custom-property>) | padding-left: var(<custom-property>); |
pl-[<value>] | padding-left: <value>; |
Sử dụng các tiện ích p-<number> như p-4 và p-8 để kiểm soát padding ở tất cả các phía của một phần tử:
<div class="p-8 ...">p-8</div>Sử dụng các tiện ích pt-<number>, pr-<number>, pb-<number>, và pl-<number> như pt-6 và pr-4 để kiểm soát padding ở một phía của một phần tử:
<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>Sử dụng các tiện ích px-<number> như px-4 và px-8 để kiểm soát padding theo chiều ngang của một phần tử:
<div class="px-8 ...">px-8</div>Sử dụng các tiện ích py-<number> như py-4 và py-8 để kiểm soát padding theo chiều dọc của một phần tử:
<div class="py-8 ...">py-8</div>Sử dụng các tiện ích ps-<number> hoặc pe-<number> như ps-4 và pe-8 để đặt các thuộc tính logic padding-inline-start và padding-inline-end, ánh xạ tới phía bên trái hoặc bên phải dựa trên hướng văn bản:
Left-to-right
Right-to-left
<div> <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>Để kiểm soát nhiều hơn, bạn cũng có thể sử dụng LTR và RTL modifiers để áp dụng các kiểu cụ thể tùy thuộc vào hướng văn bản hiện tại.
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.