LifeUI
1.53.2Espaciado
Valores de espaciado que controlan márgenes, padding y gaps entre elementos
Tokens de espaciado
| Token de diseño | Valor en Rem | Valor en Pixels | Vista previa |
|---|---|---|---|
| 0 | 0px | 0px | |
| px | 0.063rem | 1px | |
| 0.5 | 0.125rem | 2px | |
| 1 | 0.25rem | 4px | |
| 1.5 | 0.375rem | 6px | |
| 2 | 0.5rem | 8px | |
| 2.5 | 0.625rem | 10px | |
| 3 | 0.75rem | 12px | |
| 3.5 | 0.875rem | 14px | |
| 4 | 1rem | 16px | |
| 5 | 1.25rem | 20px | |
| 6 | 1.5rem | 24px | |
| 7 | 1.75rem | 28px | |
| 8 | 2rem | 32px | |
| 9 | 2.25rem | 36px | |
| 10 | 2.5rem | 40px | |
| 11 | 2.75rem | 44px | |
| 12 | 3rem | 48px | |
| 14 | 3.5rem | 56px | |
| 16 | 4rem | 64px | |
| 20 | 5rem | 80px | |
| 24 | 6rem | 96px | |
| 28 | 7rem | 112px | |
| 32 | 8rem | 128px | |
| 36 | 9rem | 144px | |
| 40 | 10rem | 160px | |
| 44 | 11rem | 176px | |
| 48 | 12rem | 192px | |
| 52 | 13rem | 208px | |
| 56 | 14rem | 224px | |
| 60 | 15rem | 240px | |
| 64 | 16rem | 256px | |
| 72 | 18rem | 288px | |
| 80 | 20rem | 320px | |
| 96 | 24rem | 384px | |
| full | 100% | auto |
Aplicación de espaciado
La escala de espaciado se aplica a las propiedades de margen, relleno y gaps, permitiendo controlar la separación entre elementos.
Las clases utilitarias se generan automáticamente a partir de los tokens de espaciado
Propiedades generadas para valores de espaciado
Margen
Tailwind genera clases para aplicar margen en diferentes direcciones:
| Clase | Propiedad | Descripción |
|---|---|---|
m-{token} | margin | Margen en todos los lados |
mx-{token} | margin-left | Margen en el lado izquierdo |
my-{token} | margin-top | Margen en el lado superior |
mt-{token} | margin-top | Margen en el lado superior |
mr-{token} | margin-right | Margen en el lado derecho |
mb-{token} | margin-bottom | Margen en el lado inferior |
ml-{token} | margin-left | Margen en el lado izquierdo |
me-{token} | margin-end | Margen en el lado derecho |
ms-{token} | margin-start | Margen en el lado izquierdo |
Ejemplo:
<div class="mt-4 mb-6"></div>Relleno
Tailwind genera clases para aplicar relleno en diferentes direcciones:
| Clase | Propiedad | Descripción |
|---|---|---|
p-{token} | padding | Relleno en todos los lados |
px-{token} | padding-left | Relleno en el lado izquierdo |
py-{token} | padding-top | Relleno en el lado superior |
pt-{token} | padding-top | Relleno en el lado superior |
pr-{token} | padding-right | Relleno en el lado derecho |
pb-{token} | padding-bottom | Relleno en el lado inferior |
pl-{token} | padding-left | Relleno en el lado izquierdo |
pe-{token} | padding-end | Relleno en el lado derecho |
ps-{token} | padding-start | Relleno en el lado izquierdo |
Ejemplo:
<div class="px-5 py-3"></div>Gap
Tailwind genera clases para aplicar gap en diferentes direcciones:
| Clase | Propiedad | Descripción |
|---|---|---|
gap-{token} | gap | Gap en todos los lados |
gap-x-{token} | gap-x | Gap en el lado izquierdo |
gap-y-{token} | gap-y | Gap en el lado superior |
Ejemplo:
<div class="gap-4">
<div class="gap-x-2" />
</div>