Herramientas de diseño

Visualizador del modelo de caja CSS — Espaciado interactivo

Ajusta ancho, alto, padding, border y margin con un diagrama de modelo de caja en vivo. Compara la ocupación de content-box frente a border-box y copia el CSS correspondiente.

Cambio rápido→Generador de Flexbox

CSSModelo de cajaVisual

Cambio rápido:Generador de Flexbox Generador de CSS Grid Conversor de unidades CSS

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

Compara el tamaño content-box y border-box
Confirma cómo padding y margin afectan al espacio de maquetación
Úsalo como ayuda docente para los fundamentos de la maquetación CSS

Cómo usar

Ajusta los controles numéricos
Inspecciona las capas visuales y los totales
Copia el CSS generado

Entrada y salida de ejemplo

Entrada

width:200px padding:20px border:2px margin:24px

Ancho total

292px (content-box)

FAQ

¿Cuál es la diferencia entre content-box y border-box?

En content-box, width/height cubren solo el contenido. En border-box, width/height incluyen contenido, padding y border.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Generador de Flexbox

Generador de Flexbox — Diseño visual unidimensional

Disponible

Ajusta flex-direction, justify-content, align-items, wrap y gap con vista previa en vivo. Añade o elimina cajas para ver el ajuste de línea y el espaciado y copia el CSS generado (y el andamiaje HTML) en tu proyecto.

Diseño CSS Maquetación

Abrir herramienta

Generador de CSS Grid

Generador de CSS Grid — Filas, columnas y gaps

Disponible

Define el número de columnas y filas, además de los espacios, para generar una maquetación básica con display:grid. Previsualiza la estructura de pistas, prueba plantillas rápidas y copia CSS o HTML para paneles de administración y rejillas de tarjetas.

CSS Grid Maquetación

Abrir herramienta

Conversor de unidades CSS

Conversor de unidades CSS — px, rem, em, vw

Disponible

Convierte entre px, rem, em, pt, vw, vh y %. Personaliza el tamaño de fuente raíz, el tamaño de fuente del contenedor padre y el tamaño de la ventana gráfica para trabajos adaptables y entregas de diseño a código.

CSS Unidades Conversión

Abrir herramienta