¿Qué es el modelo de caja de CSS (Box Model)?

El modelo de caja de CSS, o «Box Model», es un concepto fundamental que describe cómo se representan los elementos HTML en una página web. Esencialmente, cada elemento HTML se considera una caja rectangular que consta de varias capas apiladas una sobre otra.

Estas capas, desde la más interna a la más externa, son:

1. Contenido (Content): El área donde se muestra el texto, las imágenes u otro contenido multimedia. Sus dimensiones se pueden definir con las propiedades width y height.
2. Relleno (Padding): Un espacio transparente que rodea el área de contenido, pero se encuentra dentro del borde. Separa el contenido del borde.
3. Borde (Border): Una línea que puede tener grosor, estilo y color, y que envuelve tanto el contenido como el relleno.
4. Margen (Margin): Un espacio transparente que rodea el borde, creando una separación entre esta caja y otros elementos adyacentes.

Comprender el modelo de caja es crucial para controlar el diseño, el tamaño y el espaciado entre los elementos. Por ejemplo:

.mi-elemento {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 2px solid red;
  margin: 10px;
  background-color: lightgray; /* Para visualizar el área de contenido + padding */
}Lenguaje del código: PHP (php)

Es importante también conocer la propiedad box-sizing, que permite controlar si el padding y el border se incluyen dentro del width y height del elemento (box-sizing: border-box;) o si se añaden externamente (comportamiento por defecto, content-box).