¿Qué es el modelo de caja en CSS?

El modelo de caja CSS describe cómo los elementos se muestran en la página como bloques rectangulares. Está compuesto por cuatro zonas o capas que se superponen, comenzando con el contenido:

1. Contenido: La zona donde se encuentra el contenido real del elemento (texto, imágenes, etc.). Su tamaño se determina mediante las propiedades width y height.

2. Relleno (Padding): La zona transparente entre el contenido y el borde del elemento. Se establece con las propiedades padding-top, padding-right, padding-bottom, padding-left o la abreviatura padding.

3. Borde (Border): La línea que rodea el Padding y el Contenido. Su estilo, grosor y color se definen con las propiedades border-width, border-style, border-color o mediante abreviaturas como border.

4. Margen (Margin): La zona transparente alrededor del borde del elemento, que lo separa de otros elementos. Se establece con las propiedades margin-top, margin-right, margin-bottom, margin-left o la abreviatura margin. Los márgenes de bloques adyacentes pueden colapsar.

El comportamiento estándar, descrito por box-sizing: content-box (por defecto), determina que las propiedades width y height se refieren solo al bloque de contenido (Content). El Padding y el Border se añaden a este tamaño, aumentando el tamaño total del elemento.

Al usar box-sizing: border-box, las propiedades width y height incluyen el Contenido, Padding y Border. El Margen siempre se suma al tamaño total del elemento, independientemente de box-sizing.

Ejemplo:

div {
  width: 100px; /* Ancho del Contenido (para content-box) o del elemento completo (para border-box) */
  height: 50px; /* Altura del Contenido (para content-box) o del elemento completo (para border-box) */
  padding: 10px; /* Relleno interno */
  border: 2px solid black; /* Borde */
  margin: 15px; /* Margen externo */
}

Dependiendo del valor de box-sizing, los tamaños reales del elemento serán diferentes.

• box-sizing: content-box: Ancho real = 100px (Contenido) + 10px (Padding izquierdo) + 10px (Padding derecho) + 2px (Borde izquierdo) + 2px (Borde derecho) = 124px. Altura real = 50px (Contenido) + 10px (Padding superior) + 10px (Padding inferior) + 2px (Borde superior) + 2px (Borde inferior) = 74px.
• box-sizing: border-box: Ancho real = 100px (Contenido + Padding + Borde). Altura real = 50px (Contenido + Padding + Borde).

El margen externo margin: 15px se añade alrededor de este tamaño total.