Интервалы
Утилиты для управления внутренними отступами элемента.
| 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>; |
Используйте утилиты p-<number> такие как p-4 и p-8 для управления внутренними отступами со всех сторон элемента:
<div class="p-8 ...">p-8</div>Используйте утилиты pt-<number>, pr-<number>, pb-<number> и pl-<number> такие как pt-6 и pr-4 для управления внутренними отступами с одной стороны элемента:
<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>Используйте утилиты px-<number> такие как px-4 и px-8 для управления горизонтальными внутренними отступами элемента:
<div class="px-8 ...">px-8</div>Используйте утилиты py-<number> такие как py-4 и py-8 для управления вертикальными внутренними отступами элемента:
<div class="py-8 ...">py-8</div>Используйте утилиты ps-<number> или pe-<number> такие как ps-4 и pe-8 для установки логических свойств padding-inline-start и padding-inline-end, которые соответствуют левой или правой стороне в зависимости от направления текста:
Слева направо
Справа налево
<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>Для большего контроля вы также можете использовать LTR и RTL модификаторы для условного применения конкретных стилей в зависимости от текущего направления текста.
Используйте такие утилиты, как p-[<value>],px-[<value>], and pb-[<value>], чтобы задать padding на основе полностью пользовательского значения:
<div class="p-[5px] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: p-(<custom-property>)
<div class="p-(--my-padding) ..."> <!-- ... --></div>Это просто сокращение, p-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a padding утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="py-4 md:py-8 ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.
Утилиты p-<number>,px-<number>,py-<number>,ps-<number>,pe-<number>,pt-<number>,pr-<number>,pb-<number>, and pl-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:
@theme { --spacing: 1px; }Подробнее о настройке шкалы интервалов читайте в документации по переменным темы.