Visualizador de modelos de cajas CSS

Cómo usar

1. Introduce los valores del modelo de caja: define margen, borde, padding y dimensiones del contenido en los campos o los deslizadores interactivos.
2. Explora la visualización: el diagrama clásico de cajas anidadas se actualiza en tiempo real — margen (naranja), borde (amarillo), padding (verde) y contenido (azul), todos claramente etiquetados.
3. Copia el CSS: haz clic en Copiar el CSS para obtener las propiedades completas del modelo de caja del elemento configurado.

¿Por qué usar el visualizador del modelo de caja CSS?

El modelo de caja CSS es uno de los conceptos más fundamentales del diseño web — y una de las fuentes de bugs más habituales, sobre todo al mezclar valores de box-sizing, colapso de márgenes y dimensionamiento de bordes. Este visualizador interactivo hace el modelo de caja concreto y tangible: ajustas los valores y ves inmediatamente cómo se apilan margen, borde y padding alrededor del contenido. Esencial para aprender, depurar y enseñar CSS.

Funcionalidades

• Diagrama interactivo: la vista clásica del modelo de caja anidado con capas codificadas por colores (margen, borde, padding, contenido).
• Conmutador box-sizing: cambia entre content-box y border-box para ver cómo afecta cada modo a las dimensiones totales.
• Lados individuales: define los valores arriba/derecha/abajo/izquierda de forma independiente para margen, padding y borde.
• Cálculo del tamaño total: muestra el ancho y alto totales calculados del elemento.
• Salida CSS: genera CSS listo para usar para el modelo de caja configurado.

Preguntas frecuentes

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

Con content-box (por defecto), width y height se aplican únicamente a la zona de contenido — padding y borde se añaden al tamaño total del elemento. Con border-box, width y height incluyen padding y borde, lo que hace los tamaños más predecibles. La mayoría de los resets CSS modernos aplican box-sizing: border-box a todos los elementos.

¿Qué es el colapso de márgenes?

Cuando dos márgenes verticales se tocan (entre elementos block adyacentes o entre padre y primer/último hijo), se fusionan en un único margen igual al mayor de los dos valores. Esto no ocurre con los hijos flex o grid, ni con elementos que tengan padding o bordes.

¿Cómo retirar el espacio adicional debajo de los elementos inline?

Los elementos inline (como ) tienen un pequeño espacio debajo causado por la alineación de la línea base del line-height. Corrígelo poniendo display: block en el elemento, o vertical-align: bottom, o font-size: 0 en el padre.