#13 El modelo de caja#13 El modelo de caja

Todo es una caja

Esta es la idea más importante de CSS: cada elemento de la página es una caja rectangular. Los títulos, los párrafos, las imágenes, los enlaces… todo. Incluso un círculo es, por dentro, una caja con las esquinas muy redondeadas.

Y cada caja tiene cuatro capas, de dentro afuera:

┌─────────────────────────────────────┐
│ margin (margen): espacio exterior   │
│  ┌───────────────────────────────┐  │
│  │ border (borde)                │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │ padding (relleno)       │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENIDO     │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

1
2

padding y margin

Las dos funcionan igual. Puedes dar un valor a cada lado:

.caja {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

O, mucho más habitual, usar la forma corta, con uno a cuatro valores:

Cuándo usar cada uno

• padding cuando quieres que el contenido respire dentro de su caja (un botón, una tarjeta con fondo).
• margin cuando quieres separar una caja de las demás.

Bordes

La forma corta de border lleva tres cosas: grosor, estilo y color.

1
2
3
4
5
6

• border-radius redondea las esquinas. Con 50% en una caja cuadrada, sale un círculo (perfecto para fotos de perfil).
• También puedes poner un borde solo en un lado: border-bottom: 2px solid gray;.

Ancho y alto

• width: ancho del contenido.
• height: alto. Mejor no fijarlo en cajas con texto: si el texto crece, se sale de la caja. Deja que el alto se adapte solo.
• max-width: ancho máximo. La caja puede encoger si no cabe (en un móvil), pero nunca pasará de ahí.

.articulo {
  max-width: 700px; /* Mejor que width: en pantallas pequeñas se adapta */
}

box-sizing: border-box

Aquí viene una sorpresa. Mira estas dos cajas con width: 200px:

1
2

Por defecto, width mide solo el contenido: el padding y el borde se suman por fuera. La primera caja ocupa 200 + 40 + 10 = 250px. Con box-sizing: border-box, width incluye el padding y el borde: la caja mide exactamente los 200px que has pedido.

Como esto es mucho más fácil de manejar, casi todas las webs empiezan su CSS con esta regla, que lo aplica a todos los elementos:

*,
*::before,
*::after {
  box-sizing: border-box;
}

El asterisco * es el selector universal: selecciona todos los elementos. Ponlo al principio de tus hojas de estilo y olvídate del problema.

Centrar una caja

Para centrar horizontalmente un bloque, dale un ancho máximo y márgenes laterales automáticos:

1
2
3
4

margin: 0 auto significa «0 arriba y abajo, y automático a los lados»: el navegador reparte el espacio sobrante a partes iguales. Es el patrón que usan casi todas las webs para su contenido principal.

Los márgenes que ya existían

¿Te has fijado en que los títulos y párrafos ya tienen espacio entre ellos y en que la página no empieza pegada al borde de la ventana? Son los estilos por defecto del navegador: el <body> trae un margin de 8px y los títulos y párrafos traen márgenes arriba y abajo. Muchas webs empiezan con body { margin: 0; } para controlar ellas todo el espacio.

Errores típicos

• Confundir padding y margin: si quieres que el fondo se extienda, es padding; si quieres separar, es margin.
• No usar box-sizing: border-box y que las cajas «no cuadren» al sumarles padding.
• Fijar height en cajas con texto: el texto se sale cuando crece o en pantallas pequeñas.
• Usar width en lugar de max-width y que la caja no quepa en el móvil.
• Querer centrar texto con margin: 0 auto o una caja con text-align: center.
• Escribir el borde incompleto: border: 2px black; no se ve porque le falta el estilo (solid).

Ejercicios

Ejercicio 1: el botón (fácil)

Convierte este enlace en un botón: fondo royalblue, texto blanco, sin subrayado, 12px de relleno arriba y abajo y 24px a los lados, y esquinas redondeadas de 8px.

1

.boton {
  background: royalblue;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
}

Ejercicio 2: la tarjeta (medio)

Crea una tarjeta centrada en la página: ancho máximo de 320px, relleno de 24px, borde de 1px sólido #ddd, esquinas de 16px, fondo blanco y 40px de margen arriba. La imagen debe ser redonda. Usa border-box.

1
2
3
4
5

* {
  box-sizing: border-box;
}

body {
  background: #f3f3f3;
  font-family: sans-serif;
}

.tarjeta {
  max-width: 320px;
  margin: 40px auto 0;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: white;
}

.foto {
  border-radius: 50%;
}

Ejercicio 3: calcula (reto)

Sin box-sizing: border-box, ¿cuánto ocupa de ancho total (contando el margen) esta caja? ¿Y con border-box?

.caja {
  width: 300px;
  padding: 10px 30px;
  border: 2px solid black;
  margin: 0 20px;
}

Ficha resumen

• Cada elemento es una caja: contenido → padding → border → margin.
• padding = espacio interior (con fondo) · margin = espacio exterior (transparente).
• Forma corta: 1 valor (todo), 2 (vertical, horizontal), 4 (arriba, derecha, abajo, izquierda).
• border: 2px solid color; y border-radius para redondear (50% = círculo).
• Usa max-width mejor que width, y evita fijar height en cajas con texto.
• Empieza tu CSS con * { box-sizing: border-box; }.
• Centrar un bloque: max-width + margin: 0 auto.

Glosario