El modelo de caja

Comprende cómo cada elemento es una caja formada por contenido, relleno, borde y margen, y domina box-sizing.

10 min · 3 preguntas

En CSS, cada elemento de la página es una caja rectangular, aunque no puedas verla. Esa caja tiene cuatro capas, como un cuadro enmarcado colgado en una pared: el contenido (la propia imagen), el relleno (el paspartú blanco entre la imagen y el marco), el borde (el marco en sí) y el margen (el espacio vacío entre el marco y los demás cuadros de la pared). A esto lo llamamos el modelo de caja.

Tres propiedades controlan estas capas. padding define el espacio interior, entre el contenido y el borde. border dibuja el borde: le das un grosor, un estilo (solid para una línea continua) y un color. margin define el espacio exterior, que aparta a los elementos vecinos. Todas estas distancias se expresan en píxeles (px).

.card {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

Puedes ajustar cada lado por separado con padding-top, padding-right, padding-bottom y padding-left, y lo mismo ocurre con margin. También hay atajos: con dos valores, el primero se aplica arriba y abajo, el segundo a la izquierda y a la derecha. Así, padding: 8px 16px; significa 8 píxeles arriba y abajo, 16 píxeles a la izquierda y a la derecha.

.card {
  padding: 8px 16px;
  margin-top: 32px;
  margin-bottom: 8px;
}

Una trampa clásica: por defecto, cuando escribes width: 200px; (la propiedad width define el ancho), esos 200 píxeles cubren solo el contenido. ¡El relleno y el borde se añaden por encima! Una caja con width: 200px, padding: 16px y border: 2px ocupa en realidad 200 + 16 + 16 + 2 + 2 = 236 píxeles de ancho. La propiedad box-sizing: border-box; corrige esto: el ancho declarado incluye entonces el relleno y el borde. La caja mide de verdad 200 píxeles de ancho, y es el contenido el que se encoge.

* {
  box-sizing: border-box;
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué propiedad define el espacio entre el contenido de una caja y su borde?
   • margin
   • padding
   • border
   • width
2. Sin box-sizing: border-box, ¿qué ancho total ocupa una caja con width: 100px, padding: 10px y border: 5px solid black?
   • 100 píxeles
   • 115 píxeles
   • 130 píxeles
   • 110 píxeles
3. ¿Qué significa el atajo margin: 10px 20px;?
   • 10 px a la izquierda y a la derecha, 20 px arriba y abajo
   • 10 px arriba y abajo, 20 px a la izquierda y a la derecha
   • 10 px arriba, 20 px abajo