Comprensión Práctica del Modelo de Caja

Cada elemento en una página web se representa como una caja rectangular. Cada caja consta de cuatro partes:

• Contenido: el texto real o los elementos;
• Relleno: espacio dentro del elemento;
• Borde: rodea el contenido y el relleno;
• Margen: espacio fuera del elemento.

Estructura visual

Margen → Borde → Relleno → Contenido. El tamaño total de un elemento depende de todas estas partes.

Contenido

La parte visible del elemento: texto, imágenes u otros elementos.

Relleno (Espacio interno)

Crea espacio entre el contenido y el borde.

.box {
  padding: 20px;
}

Forma abreviada

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Margen (Espacio externo)

Crea espacio entre los elementos.

.box {
  margin: 20px;
}

Notación abreviada

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Borde

Define el borde del elemento.

.box {
  border: 4px solid darkblue;
}

Diferencia clave

• Relleno → espacio interno (afecta el fondo);
• Margen → espacio externo (NO afecta el fondo).

Box Sizing

Controla cómo se calculan el ancho y la altura.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border se suman al tamaño;
• border-box: todo incluido en el tamaño.

En proyectos reales, se prefiere border-box.