padding

Ejemplos

Ejemplo básico

Utiliza las utilidades p-<number> como p-4 y p-8 para controlar el padding en todos los lados de un elemento:

<div class="p-8 ...">p-8</div>

Agregar padding a un solo lado

Utiliza las utilidades pt-<number>, pr-<number>, pb-<number> y pl-<number> como pt-6 y pr-4 para controlar el padding en un solo lado de un elemento:

<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>

Agregar padding horizontal

Utiliza las utilidades px-<number> como px-4 y px-8 para controlar el padding horizontal de un elemento:

<div class="px-8 ...">px-8</div>

Agregar padding vertical

Utiliza las utilidades py-<number> como py-4 y py-8 para controlar el padding vertical de un elemento:

<div class="py-8 ...">py-8</div>

Usar propiedades lógicas

Utiliza las utilidades ps-<number> o pe-<number> como ps-4 y pe-8 para establecer las propiedades lógicas padding-inline-start y padding-inline-end, que se asignan al lado izquierdo o derecho según la dirección del texto:

<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>

Para un mayor control, también puedes utilizar los modificadores LTR y RTL para aplicar estilos específicos de forma condicional según la dirección actual del texto.

Utiliza las utilidades pbs-<number> y pbe-<number> para establecer las propiedades lógicas padding-block-start y padding-block-end, que se asignan al lado superior o inferior según el modo de escritura:

<div class="pbs-8 ...">pbs-8</div>

Usar un valor personalizado

Usa utilidades como p-[<value>],px-[<value>], y pb-[<value>] para establecer el/la padding basándose en un valor completamente personalizado:

<div class="p-[5px] ...">  <!-- ... --></div>

Para variables CSS, también puedes usar la sintaxis p-(<custom-property>) :

<div class="p-(--my-padding) ...">  <!-- ... --></div>

Esto es solo un atajo para p-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad padding el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="py-4 md:py-8 ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Las utilidades p-<number>,px-<number>,py-<number>,ps-<number>,pe-<number>,pbs-<number>,pbe-<number>,pt-<number>,pr-<number>,pb-<number>, y pl-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:

@theme {  --spacing: 1px; }

Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.