Visualizador de espaciado/relleno
Visualice cómo interactúan las dimensiones de relleno, margen, borde y cuadro mediante un diagrama de modelo de cuadro CSS codificado por colores y una vista previa en vivo. Ajuste los valores en tiempo real y exporte clases de utilidad CSS o Tailwind abreviadas al instante; se ejecuta completamente en su navegador sin necesidad de registrarse.
Adjust padding, margin, border, and box dimensions using the controls below. The diagram and live preview update instantly - then copy the generated CSS or Tailwind classes.
Applied to all spacing values
Box Dimensions
Padding
Margin
Box Model Diagram
Live Preview
¿Por qué utilizar nuestro visualizador de espaciado/relleno?
- Vista previa instantánea en vivo: nuestro visualizador de espaciado/relleno actualiza el diagrama del modelo de caja y la vista previa en vivo en tiempo real a medida que ajusta los valores, sin necesidad de hacer clic en ningún botón. Vea exactamente cómo interactúan el relleno, el margen y el borde antes de escribir una sola línea de CSS.
- Seguro y privado: sin carga: el visualizador de espaciado/relleno se ejecuta completamente en su navegador utilizando JavaScript del lado del cliente. Nunca se envían datos a ningún servidor: sus experimentos de diseño y el CSS generado permanecen completamente privados en su dispositivo.
- Salida CSS y Tailwind: genere clases de utilidad CSS simple y CSS Tailwind a partir de sus valores de espaciado al instante. El visualizador de espaciado/relleno produce CSS abreviado siempre que sea posible y asigna valores a la escala Tailwind más cercana, listo para pegar en su proyecto.
- 100% gratis - Sin límites: use el visualizador de espaciado/relleno completamente gratis, sin registro, suscripción ni límites de uso. Ajuste valores, copie CSS y experimente con diseños de modelos de cajas tantas veces como necesite: siempre gratis, sin anuncios.
¿Qué es el modelo de caja CSS?
El modelo de cuadro CSS es el concepto de diseño fundamental que describe cómo cada elemento HTML se representa como un cuadro rectangular con cuatro capas distintas: contenido, relleno, borde y margen. Comprender cómo interactúan estas capas es esencial para un trabajo de diseño CSS preciso. Nuestro visualizador de espaciado/relleno genera un diagrama codificado por colores de las cuatro capas simultáneamente, lo que facilita ver exactamente cómo sus valores afectan el tamaño total renderizado y el espaciado de cualquier elemento. Ya sea que esté depurando problemas de diseño o creando un sistema de diseño, el visualizador de espaciado/relleno en línea le brinda información visual instantánea sin escribir ningún código.
Cómo funciona nuestro visualizador de espaciado/relleno
- Establezca sus valores: ingrese los valores de relleno, margen, borde y dimensión del cuadro usando los controles. Elija su unidad preferida (px, rem, em o %) y el diagrama se actualizará al instante.
- Lea el diagrama y la vista previa: el diagrama del modelo de caja codificado por colores muestra las cuatro capas con valores etiquetados. La vista previa en vivo muestra el cuadro real con el CSS exacto aplicado para que pueda ver el resultado visual real.
- Copie su CSS o Tailwind: la herramienta genera automáticamente clases de utilidad CSS y Tailwind abreviadas a partir de sus valores. Copie cualquiera de los resultados directamente en su proyecto; no es necesaria ninguna conversión manual.
Lo que muestra el visualizador
- Margen (naranja): la capa más externa: espacio entre este elemento y sus vecinos. El margen es transparente y no afecta el color de fondo del elemento.
- Borde (rojo-naranja): el borde visible del elemento. El ancho del borde, el estilo (sólido, discontinuo, punteado) y el radio del borde son configurables.
- Relleno (verde): Espacio entre el borde y el contenido. El relleno hereda el color de fondo del elemento y aumenta el área en la que se puede hacer clic.
- Contenido (azul): el área más interna donde se representan el texto y los elementos secundarios. El ancho y el alto controlan las dimensiones del cuadro de contenido.
Privacidad y seguridad de datos
El visualizador de espaciado/relleno procesa todos los cálculos y renderiza localmente en su navegador web usando JavaScript. No se transmiten valores de espaciado, salida CSS ni datos de sesión a ningún servidor externo. Esto hace que la herramienta sea completamente privada y segura para su uso en cualquier flujo de trabajo de desarrollo o diseño.
Preguntas frecuentes
Un visualizador de espaciado/relleno es una herramienta que le permite ajustar el relleno CSS, el margen, el borde y las dimensiones del cuadro y ver el resultado en una vista previa en vivo y un diagrama de modelo de cuadro codificado por colores. Nuestro visualizador de espaciado/relleno basado en navegador también genera clases de utilidad CSS y Tailwind abreviadas, sin necesidad de registrarse.
El relleno es el espacio entre el contenido de un elemento y su borde; hereda el color de fondo. El margen es el espacio fuera del límite entre el elemento y sus vecinos; siempre es transparente. El visualizador de espaciado/relleno muestra ambos en colores distintos.
La herramienta admite px, rem, em y%. Seleccione su unidad preferida en el menú desplegable Unidad y todos los valores de espaciado utilizarán esa unidad en la salida CSS generada.
El visualizador de espaciado/relleno asigna valores de px a la escala de espaciado CSS de Tailwind más cercana. Los valores no estándar se generan como valores arbitrarios usando sintaxis entre corchetes (por ejemplo, p-[18px]). La salida Tailwind funciona mejor con unidades px.
Sí. La herramienta genera automáticamente CSS abreviado cuando es posible: relleno: 16px cuando todos los lados son iguales, relleno: 16px 24px cuando arriba/abajo e izquierda/derecha coinciden, y valores individuales solo cuando los cuatro lados difieren.
Sí. Cada lado tiene su propio campo de entrada. Utilice "Aplicar arriba a todo" para establecer los cuatro lados con el mismo valor, o "Borrar todo" para restablecer todos los lados a cero.
Sí. Todos los cálculos se ejecutan íntegramente en su navegador. Nunca se transmiten valores de espaciado, salida CSS ni datos de sesión a ningún servidor.
Sí. La herramienta admite estilos de borde sólido, discontinuo, punteado y sin borde, ancho de borde configurable y radio de borde en píxeles, todo reflejado en la vista previa en vivo y CSS generado.
Sí. El visualizador de espaciado/relleno es 100% gratuito y no requiere registro, suscripción ni pago. No hay funciones premium ni opciones bloqueadas: todo es gratis para siempre.