Box model a fondo: todo es una caja

Cada elemento de una página — títulos, imágenes, hasta una letra — es un rectángulo con cuatro capas. Entender esas capas es entender POR QUÉ las cosas miden lo que miden y se separan como se separan. Esta es la lección que convierte "muevo números hasta que se vea bien" en control real.

Las cuatro capas de toda caja

┌─────────────────────────────────────────┐
│                 MARGIN                  │   espacio HACIA AFUERA
│   ┌─────────────────────────────────┐   │   (separa de los vecinos)
│   │             BORDER              │   │   el marco visible
│   │   ┌─────────────────────────┐   │   │
│   │   │        PADDING          │   │   │   espacio HACIA ADENTRO
│   │   │   ┌─────────────────┐   │   │   │   (entre borde y contenido)
│   │   │   │     CONTENT     │   │   │   │   el texto, la imagen
│   │   │   └─────────────────┘   │   │   │
│   │   └─────────────────────────┘   │   │
│   └─────────────────────────────────┘   │
└─────────────────────────────────────────┘

<div class="caja">CONTENT: soy el contenido</div>
<div class="caja">Y el espacio entre nosotros es MARGIN</div>

body { font-family: system-ui; padding: 24px; }
.caja {
background: #ede9fe;         /* pinta content + padding */
padding: 16px;               /* espacio interno */
border: 3px solid #6d28d9;   /* el marco */
margin-bottom: 24px;         /* espacio hacia el vecino de abajo */
border-radius: 8px;
color: #1e293b;
}

Nota clave del ejemplo: el background pinta el content Y el padding (hasta el borde). El margin es siempre transparente — es ausencia, no caja.

El problema histórico: ¿cuánto mide una caja?

Pregunta trampa: si declaras width: 300px; padding: 20px; border: 5px, ¿cuánto ocupa la caja? Respuesta del CSS original: 350px (300 + 20×2 + 5×2), porque width medía solo el content. Décadas de dolores de cabeza haciendo aritmética para que las columnas cupieran.

La solución moderna es una propiedad que cambia QUÉ mide el width:

Margin: las particularidades

Dos comportamientos del margin que debes conocer para no pelearte con él:

1. Colapso de márgenes: dos márgenes verticales que se tocan NO se suman — gana el mayor. Si un h2 tiene margin-bottom: 24px y el p siguiente margin-top: 16px, la separación es 24px, no 40px. (Solo pasa en vertical, y Flexbox/Grid lo eliminan — módulos 5 y 6.)
2. Centrado clásico: margin-inline: auto con un width definido centra el elemento horizontalmente. Lo usarás en todo contenedor de página.

Mini-reto

Abre DevTools sobre cualquier elemento y ve a la pestaña Computed: ahí está el diagrama del box model con los valores reales de ESE elemento. Pasa el mouse por cada capa del diagrama y mira cómo se ilumina en la página. Esa vista será tu mejor amiga durante todo el curso.

Qué sigue

Ya mides cajas — pero, ¿px, %, em, rem? La próxima lección ordena el zoológico de unidades de CSS y te da la regla práctica de cuándo usar cada una.