Visualizador de modelo de caja

Cada elemento HTML se representa como un recuadro rectangular. El modelo de caja CSS describe cómo las capas de contenido, padding, border y margin del elemento se superponen para determinar el espacio total que ocupa en la página. Comprender este modelo es esencial para controlar el diseño y el espaciado.

Ajusta las entradas numéricas de cada capa — margin, border, padding y dimensiones del contenido. Haz clic en una sección de capa para resaltarla en el diagrama. La vista previa visual se actualiza al instante, y el código CSS correspondiente se genera en la parte inferior para que puedas copiarlo.

El margin es el espacio transparente fuera del border que separa el elemento de sus vecinos. El border es el límite visible alrededor del padding. El padding es el espacio entre el border y el contenido real. El content es el área más interna donde aparecen el texto y los elementos secundarios.

Con content-box (predeterminado), el width y height establecidos se aplican solo al área de contenido — el padding y border se añaden encima. Con border-box, width y height incluyen padding y border, lo que hace que los cálculos de diseño sean más intuitivos. La mayoría de los proyectos modernos usan border-box globalmente.

Usa este visualizador para experimentar con diferentes valores y ver cómo cada capa contribuye al tamaño total del elemento. Cuando un elemento ocupa más espacio del esperado, comprueba si los valores de padding o border lo están empujando más allá del ancho deseado. El CSS generado se puede pegar directamente en tu proyecto.