¿Qué es el modelo de caja en CSS?

El modelo de caja en CSS describe cómo se calcula el espacio que ocupa un elemento en una página web. Incluye:

• Contenido: La zona para el contenido real del elemento (texto, imágenes).
• Padding (relleno): Espacio entre el contenido y el borde del elemento.
• Borde: El borde que rodea el padding y el contenido.
• Margen: Espacio alrededor del borde del elemento, separándolo de otros elementos.

El tamaño del elemento por defecto (en el modelo estándar box-sizing: content-box) se determina sumando los tamaños del contenido, padding y borde. El margen se añade al espacio total ocupado, pero no afecta al tamaño del propio elemento.

La propiedad box-sizing: border-box cambia el cálculo del tamaño del elemento, incluyendo padding y borde en el ancho y alto totales. En este caso, el tamaño del elemento se determina por width/height, y el padding y el borde "consumen" espacio del contenido.

/* Modelo estándar (por defecto) */
.element-content-box {
  width: 100px; /* Tamaño del contenido */
  padding: 10px;
  border: 5px solid black;
  /* Ancho total: 100px (contenido) + 10px (padding izquierdo) + 10px (padding derecho) + 5px (borde izquierdo) + 5px (borde derecho) = 130px */
}

/* Modelo border-box */
.element-border-box {
  width: 100px; /* Ancho total: contenido + padding + borde */
  padding: 10px;
  border: 5px solid black;
  /* Tamaño del contenido: 100px - 10px (padding izquierdo) - 10px (padding derecho) - 5px (borde izquierdo) - 5px (borde derecho) = 70px */
}

Comprender el modelo de caja es fundamental para posicionar y componer elementos con precisión en la página.