¿Qué es el modelo de caja CSS?

Question

Accepted Answer

Todo elemento en CSS es una caja rectangular **box** compuesta de cuatro capas, de dentro hacia afuera: **content**, **padding**, **border** y **margin**. Entender cómo se combinan es la base de todo layout.

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## La trampa clásica: ancho total

Con el **valor por defecto** `box-sizing: content-box`, el ancho renderizado es *mayor* que el `width` que fijaste, porque padding y border se suman:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

Esto sorprende a los principiantes — estableces `width: 200px` pero ocupa 250px. La solución que usa todo el mundo:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — espacio *dentro* del borde; es parte del elemento (clickeable, toma el color de fondo).
- **margin** — espacio *fuera* del borde; transparente y los márgenes verticales adyacentes se **colapsan** (gana el mayor de los dos márgenes que se tocan).

## Por qué es importante

El modelo de caja rige cuán grandes son realmente los elementos y cómo se espacian entre sí.

Saber que el modelo por defecto suma padding/border al `width` (y por qué `border-box` es la solución casi universal) previene la confusión más común en el dimensionamiento de layouts.