Skip to main content
FreeToolkit .ai

Generador de Escala de Espaciado Genera un sistema de escala de espaciado coherente con una unidad base personalizable y multiplicadores.

Generador de Escala de Espaciado illustration
🎨

Generador de Escala de Espaciado

Genera un sistema de escala de espaciado coherente con una unidad base personalizable y multiplicadores.

1

Establecer la unidad base

Elija el valor de espaciado base en píxeles (comúnmente 4px o 8px).

2

Elegir la unidad de salida

Seleccione px o rem para los valores de espaciado generados.

3

Copiar variables CSS

Previsualice la escala visual y copie las propiedades personalizadas de CSS.

Loading tool...

What Is Generador de Escala de Espaciado?

El Generador de Escala de Espaciado crea un sistema de espaciado consistente para el diseño web utilizando una unidad base multiplicada por un conjunto predefinido de factores. El espaciado consistente es fundamental para diseños profesionales y armoniosos; sin él, los diseños parecen inconsistentes y poco pulidos. Esta herramienta utiliza una unidad base (típicamente 4px o 8px) multiplicada por factores (0, 0,5, 1, 1,5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24) para generar una escala de espaciado integral. La vista previa visual muestra cada valor de espaciado como una barra coloreada, lo que facilita ver las diferencias relativas. La salida es un conjunto de propiedades personalizadas de CSS (--space-0 a --space-24) en px o rem, listas para usarse como valores de margen, relleno, separación y otros valores de espaciado en toda la hoja de estilos.

Why Use Generador de Escala de Espaciado?

  • Sistema de unidad base para un espaciado matemáticamente coherente
  • Gráfico de barras visuales que muestra las diferencias relativas de espaciado
  • Salida de propiedades personalizadas de CSS para la integración del sistema de diseño
  • Admite unidades de salida px y rem

Common Use Cases

Tokens del Sistema de Diseño

Generar tokens de espaciado como base de un sistema de diseño.

Espaciado de la Biblioteca de Componentes

Asegurar un espaciado coherente en todos los componentes de una biblioteca.

Configuración del Nuevo Proyecto

Establecer un sistema de espaciado al iniciar nuevos proyectos web.

Alineación del Equipo

Compartir una escala de espaciado estandarizada entre los equipos de diseño y desarrollo.

Technical Guide

Una escala de espaciado utiliza una unidad base multiplicada por una serie de factores para crear valores de espaciado consistentes y proporcionales. Las unidades base más comunes son 4px (utilizada por Tailwind CSS y Material Design) y 8px (utilizada por muchos sistemas de diseño). Una unidad base de 4px crea un control muy detallado: 4, 8, 12, 16, 20, 24, 32, 40, etc. Una unidad base de 8px crea saltos más grandes: 8, 16, 24, 32, 40, 48, etc. Las propiedades personalizadas de CSS (variables) almacenan los valores para su reutilización: --space-1: 0,25rem. Estas pueden usarse en margen, relleno, separación y cualquier otra propiedad de espaciado. El uso de unidades rem garantiza que el espaciado se escala con el tamaño de fuente raíz, manteniendo las proporciones cuando los usuarios cambian el tamaño del texto. El paso medio (0,5x) proporciona un incremento más pequeño para ajustes finos. Los multiplicadores grandes (16x, 20x, 24x) manejan el espaciado de secciones y los grandes huecos en el diseño.

Tips & Best Practices

  • 1
    Utilice una base de 4px para un control más fino, 8px para una escala más simple
  • 2
    Aplicar unidades rem para un espaciado accesible y escalable
  • 3
    Utilizar propiedades personalizadas de CSS para ajustes globales de espaciado fáciles
  • 4
    Manténgase dentro de los valores de la escala: evite el espaciado arbitrario para mantener la coherencia

Related Tools

Zona de pruebas de CSS Grid - free online tool

Zona de pruebas de CSS Grid

Constructor visual de CSS Grid con controles interactivos para columnas de plantilla, filas y espacios.

🎨 CSS & Design
Generador de configuración de Tailwind - free online tool

Generador de configuración de Tailwind

Genera archivos de configuración de Tailwind CSS con colores personalizados, fuentes y puntos de interrupción.

🎨 CSS & Design
Generador de Escala Tipográfica - free online tool

Generador de Escala Tipográfica

Genera una escala tipográfica modular con tamaño base, proporción y unidades personalizables.

🎨 CSS & Design
Generador de Variables CSS - free online tool

Generador de Variables CSS

Genera propiedades personalizadas de CSS (variables) para colores, espaciado y tipografía.

🎨 CSS & Design

Frequently Asked Questions

Q ¿Qué tamaño base debería usar?
4px es el más popular (utilizado por Tailwind). 8px proporciona una escala más simple y restrictiva.
Q ¿Debería utilizar px o rem?
rem es preferido para la accesibilidad, ya que se escalona con las preferencias de tamaño de fuente del usuario.
Q ¿Por qué no usar valores de espaciado arbitrarios?
Una escala coherente crea armonía visual y hace que los diseños parezcan más pulidos y profesionales.
Q ¿Cómo uso estos valores de espaciado?
Utilice las propiedades personalizadas de CSS para margen, relleno, brecha: margen: var(--space-4);
Q ¿Puedo modificar el conjunto de multiplicadores?
El conjunto estándar cubre la mayoría de las necesidades, pero puede agregar o eliminar multiplicadores editando el CSS generado.

About This Tool

Generador de Escala de Espaciado is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.