El box model

Todo es una caja

┌────────────── margin ───────────────┐
│                                     │
│   ┌────────── border ───────────┐   │
│   │                             │   │
│   │   ┌────── padding ──────┐   │   │
│   │   │                     │   │   │
│   │   │      contenido      │   │   │
│   │   │                     │   │   │
│   │   └─────────────────────┘   │   │
│   │                             │   │
│   └─────────────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

La confusión clásica es padding contra margin. La distinción práctica: el padding aleja el contenido de su propio borde, el margin aleja la caja de sus vecinas. Si pones un fondo de color, el padding se pinta y el margin no.

.card {
    padding: 1.5rem;      /* aire por dentro */
    margin-bottom: 2rem;  /* separación de la siguiente */
    border: 1px solid #ddd;
    border-radius: 0.75rem;
}

margin · separación exterior

border

padding · aire interior

contenido

El fondo llega hasta el borde: pinta el contenido y el padding, pero nunca el margin.

Los valores admiten varias formas:

padding: 1rem;                /* las cuatro caras */
padding: 1rem 2rem;           /* vertical | horizontal */
padding: 1rem 2rem 3rem 4rem; /* arriba, derecha, abajo, izquierda */

box-sizing, o por qué 300 no son 300

Por defecto, width mide solo el contenido. El padding y el borde se suman por fuera:

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid;
}

Esa tarjeta ocupa 300 + 20 + 20 + 2 + 2 = 344px. Es la causa del desbordamiento más común de toda la unidad: pones dos cajas del 50 % con padding y ya no caben en una fila.

La solución cabe en tres líneas, y se pone al principio de toda hoja de estilos:

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

border-box

Hace que width incluya el padding y el borde. Ahora 300px son 300px, pase lo que pase por dentro, y el tamaño declarado es el tamaño real.

Anchura: fija, fluida y con techo

.card { width: 300px; }        /* frágil: no cabe en un móvil de 320 */
.card { width: 100%; }         /* fluida, pero en un monitor grande se estira */
.card {
    width: 100%;
    max-width: 30rem;          /* fluida hasta un límite */
}

La tercera es casi siempre la correcta: ocupa lo que haya, pero no más de lo razonable. Es la primera aparición de una idea que domina la unidad — describir límites en lugar de medidas exactas.

Centrar un bloque

.container {
    width: min(90%, 70rem);
    margin-inline: auto;
}

margin-inline: auto es la forma moderna de margin-left: auto; margin-right: auto. Y min(90%, 70rem) se lee: «el 90 % del espacio, salvo que eso pase de 70rem, en cuyo caso 70rem». Un contenedor así funciona en un móvil y en un monitor de 34 pulgadas sin una sola media query.

Extra · el colapso de márgenes

Dos márgenes verticales adyacentes no se suman: se funden en el mayor de los dos. Si un párrafo tiene 20px abajo y el siguiente 30px arriba, la separación es 30, no 50.

Solo pasa en vertical, y no pasa dentro de un contenedor Flexbox o Grid. Por eso, en cuanto empecemos a usar gap, este problema desaparece: es una de las razones por las que gap es preferible a los márgenes para separar elementos de una lista.

Tarea 4 · Construye tus tarjetas

En productos.html tienes article con el marcado de cada producto. Dales forma:

1. Pon el box-sizing: border-box global al principio de tu hoja.
2. Da a cada tarjeta padding, border, border-radius y separación entre ellas.
3. Limita su anchura con width y max-width en lugar de un valor fijo.
4. Crea la clase .container y aplícala para centrar el contenido de las páginas.
5. Inspecciona una tarjeta en DevTools y localiza en el diagrama de Layout cada una de las cuatro capas. Comprueba que los números coinciden con lo que escribiste.

Estoy atascado · mis tarjetas desbordan

Casi siempre es una de estas tres, en este orden de probabilidad:

1. Falta el box-sizing: border-box, y el padding se está sumando por fuera del width.
2. Hay un width fijo en píxeles mayor que el espacio disponible.
3. Hay una imagen dentro sin max-width: 100%, y la imagen empuja la caja desde dentro.

En DevTools, la pestaña Layout te dibuja el box model con sus medidas reales: compara ese número con el que tú escribiste y verás por dónde se va la diferencia.

Ver respuestas

1 · El padding es espacio dentro de la caja y se pinta con su fondo; el margin es espacio fuera y siempre es transparente.

2 · Que width incluya el padding y el borde, en vez de medir solo el contenido.

3 · Porque describe un límite en lugar de una medida: la caja se adapta al espacio disponible y solo deja de crecer cuando llega al techo.

---