Visualizador del Modelo de Caja CSS
Visualizador del modelo de caja CSS en línea y gratuito. Arrastra margin, border, padding y content para ver los cambios en tiempo real y entender la diferencia entre content-box y border-box.
Visualizador del Modelo de Caja CSS
Visualizador del modelo de caja CSS en línea y gratuito. Arrastra margin, border, padding y content para ver los cambios en tiempo real y entender la diferencia entre content-box y border-box.
Acerca del modelo de caja CSS
Cada elemento son cuatro capas anidadas
De dentro hacia fuera, un elemento es content, luego padding, luego border y luego margin. El contenido contiene el texto o los elementos hijos; el padding es el espacio dentro del borde; el borde envuelve el padding; el margen aparta a los vecinos. Esta herramienta dibuja las cuatro capas para que veas cómo cada propiedad aumenta el espacio que ocupa un elemento.
content-box frente a border-box
Con content-box (el valor predeterminado), width solo define el contenido, por lo que padding y border se suman y el elemento acaba siendo más ancho que el width indicado. Con border-box, width se refiere a la caja del borde, así que padding y border se restan del interior y el contenido se encoge. Alterna aquí ambos modos para ver cómo el mismo width produce dos espacios distintos.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Qué es el modelo de caja CSS?
Es la forma en que el navegador dimensiona cada elemento: cuatro capas anidadas — content, padding, border y margin. Entenderlo explica casi cualquier sorpresa de maquetación.
Establecí width pero mi elemento es más ancho. ¿Por qué?
En el modo content-box predeterminado, padding y border se suman fuera del width. Cambia a border-box para que width incluya padding y border, o usa esta herramienta para ver las cifras exactas.
¿Mis datos se envían a algún servidor?
No. Todos los cálculos del modelo de caja se ejecutan por completo en tu navegador y nada de lo que introduces sale de tu dispositivo.