Generador de Escala de Espaciado
El generador de escala de espaciado crea un sistema de espaciado a partir de una unidad base de 4, 5, 6 u 8 px en 12, 16 o 20 pasos y lo exporta como propiedades personalizadas de CSS en px o rem.
Acerca de esta herramienta
El generador de escala de espaciado crea un sistema de espaciado a partir de una unidad base de 4, 5, 6 u 8 px en 12, 16 o 20 pasos y lo exporta como propiedades personalizadas de CSS en px o rem.
Cómo se usa
- Elige una unidad base, como 4 px u 8 px.
- Selecciona la salida en px o rem.
- Elige cuántos pasos necesitas.
- Haz clic en Copiar variables CSS para añadir la escala a tu hoja de estilos.
Datos útiles
- El espaciado de Tailwind CSS se basa en una unidad de 4 px (0.25 rem).
- Material Design usa una cuadrícula de 8 dp, con 4 dp para ajustes pequeños.
- Múltiplos como 0.5, 1, 1.5, 2, 3, 4, 6 y 8 cubren la mayoría de las necesidades de espaciado.
- Aquí los valores rem asumen un tamaño de fuente raíz de 16 px.
- Una escala fija sustituye los valores en píxeles arbitrarios y mantiene los diseños visualmente coherentes.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Debo usar un sistema de espaciado de 4px o de 8px?
8 px es un valor por defecto habitual para layouts; 4 px da un control más fino para interfaces densas y componentes pequeños. Muchos equipos usan pasos de 4 px dentro de un ritmo de 8 px.
¿Qué es una escala de espaciado en un sistema de diseño?
Un conjunto predefinido de valores de espaciado para márgenes, padding y gaps, de modo que todas las pantallas usen los mismos incrementos.
¿Cómo uso la escala en CSS?
Copia las variables y úsalas así: padding: var(--space-4); para que el espaciado sea coherente entre componentes.
¿Es lo mismo que el espaciado de Tailwind?
Con una base de 4 px y salida en rem, los valores siguen los mismos múltiplos que la escala de espaciado predeterminada de Tailwind.