Table of contents
Todos los elementos HTML se pueden considerar como cajas.
El modelo de caja
En CSS, el término "modelo de caja" se usa cuando se habla de diseño.
El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Este modelo consiste de: márgenes, bordes, rellenos y el contenido. La siguiente imagen ilustra el modelo de caja:
Explicación de las diferentes partes:
Contenido - El contenido de la caja, donde aparecen texto e imágenes.
Relleno - Borra un área alrededor del contenido. El relleno es transparente.
Borde - Un borde que rodea el relleno y el contenido.
Margen - Borra un área fuera del borde. El margen es transparente.
El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.
Ejemplo:
Demostración del modelo de caja:
Ancho y alto de un elemento
Para establecer correctamente el ancho y el alto de un elemento en todos los navegadores, debes saber cómo funciona el modelo de caja.
Importante: Cuando estableces las propiedades de ancho y alto de un elemento con CSS, simplemente estableces el ancho y el alto del área de contenido. Para calcular el tamaño completo de un elemento, también debes agregar relleno, borde y margen.
Ejemplo:
Este elemento <div> tendrá un ancho total de 350px:
Aquí está el cálculo:
320px(ancho)
+20px(relleno derecha e izquierda )
+20px(borde derecha e izquierda )
+0px(margen derecha e izquierda)
\= 350px
El ancho total de un elemento debe calcularse así:
Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho
La altura total de un elemento debe calcularse así:
Altura total del elemento = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior
Resumen
El modelo de caja CSS consiste en márgenes, bordes, rellenos y contenido. Permite agregar un borde y definir el espacio entre elementos. Para establecer el ancho y alto de un elemento, se debe considerar el contenido, relleno, borde y margen. El ancho total del elemento se calcula sumando el ancho, relleno, borde y margen izquierdo y derecho. La altura total se calcula de manera similar.
Traducido con 💚 desde W3Schools.com