Modelo de Caja (Box Model)

¿Qué es el Modelo de Caja?

El modelo de caja en CSS describe cómo se representa cada elemento como una caja rectangular que consta de las siguientes partes:

Contenido: El área donde se encuentra el texto o los elementos hijos.
Padding: Espacio entre el contenido y el borde.
Borde: El contorno que envuelve el padding y el contenido.
Margen: Espacio entre el borde de una caja y otras cajas.

Ejemplo Visual

Contenido de la caja

Imagen explicativa del modelo de caja:

Colores Representativos

Contenido Padding Borde Margen

Ejemplo Práctico

Este es un ejemplo de cómo el modelo de caja afecta la disposición de los elementos.

El padding agrega espacio interno.
El margin separa esta caja de otras.
El border es visible como un contorno.

Propiedades CSS Relacionadas

Algunas propiedades CSS comunes usadas para manipular el modelo de caja:

width y height: Definen el tamaño del contenido.
padding: Controla el espacio interno de la caja.
border: Configura el tamaño y estilo del borde.
margin: Controla el espacio externo de la caja.
box-sizing: Define cómo se calculan width y height (por ejemplo, content-box o border-box).

Propiedad box-sizing

Por defecto, CSS utiliza content-box, lo que significa que el tamaño de width y height excluye padding y border. Usar box-sizing: border-box asegura que el tamaño total incluya estos valores.

/* Ejemplo de uso */
.box {
    box-sizing: border-box;
}