¿Qué es el modelo de caja, de qué consta y cuáles son…

El modelo de caja (Modelo de Caja CSS) es una entidad abstracta que describe cómo los elementos HTML se representan en la página en forma de bloques rectangulares. Define el tamaño y la disposición del contenido, los rellenos internos, los bordes y los márgenes externos del elemento.

El modelo de caja consta de las siguientes partes:

Contenido: El contenido del elemento (texto, imágenes, etc.). Su tamaño se determina mediante las propiedades width y height.
Relleno (Padding): El espacio entre el contenido del elemento y su borde. Se define mediante las propiedades padding-top, padding-right, padding-bottom, padding-left o la propiedad abreviada padding.
Borde (Border): El borde alrededor del relleno interno y el contenido. Se define mediante las propiedades border-width, border-style, border-color o la propiedad abreviada border.
Margen (Margin): El espacio entre el borde del elemento y los elementos externos. Se define mediante las propiedades margin-top, margin-right, margin-bottom, margin-left o la propiedad abreviada margin.

Existen dos tipos principales de modelo de caja, determinados por la propiedad box-sizing:

content-box (valor predeterminado): El ancho y la altura del elemento, establecidos por las propiedades width y height, solo se refieren al área de contenido. El relleno y el borde se añaden a estos tamaños, aumentando el tamaño total del elemento.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Añade 20px al tamaño total en cada eje */
  border: 2px solid black; /* Añade 4px al tamaño total en cada eje */
  box-sizing: content-box; /* Comportamiento predeterminado */
}
/* El tamaño total del elemento será 124px por 124px */

border-box: El ancho y la altura del elemento, establecidos por las propiedades width y height, incluyen el contenido, el relleno y el borde. El relleno y el borde no aumentan el tamaño total del elemento, sino que "lo comprimen" en el área de contenido.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Se incluye en el ancho/alto total */
  border: 2px solid black; /* Se incluye en el ancho/alto total */
  box-sizing: border-box;
}
/* El tamaño total del elemento será 100px por 100px */

Se usa más frecuentemente border-box para un comportamiento más predecible en los tamaños de los elementos al agregar relleno y borde. Esto es útil, por ejemplo, al crear diseños adaptativos donde los elementos deben ocupar un ancho porcentual determinado.

¿Qué es el modelo de caja, de qué consta y cuáles son sus tipos?