El modelo de caja

Todo en CSS es una caja. Domina margin, padding, border y box-sizing.

Abre las DevTools de tu navegador, pasa el mouse por cualquier elemento de una página web y verás algo revelador: todo tiene un rectángulo de colores alrededor. Azul, verde, amarillo, naranja. Esos rectángulos representan el modelo de caja (box model), y entenderlo es la clave para controlar el layout en CSS.

Todo es una caja

Cada elemento HTML es una caja rectangular. No importa si es un título, un párrafo, una imagen o un enlace. Para CSS, todo es un rectángulo con cuatro capas:

┌──────────────────────────────────────┐
│              MARGIN                  │ ← Espacio fuera del borde
│  ┌────────────────────────────────┐  │
│  │            BORDER              │  │ ← El borde visible
│  │  ┌──────────────────────────┐  │  │
│  │  │         PADDING          │  │  │ ← Espacio dentro del borde
│  │  │  ┌────────────────────┐  │  │  │
│  │  │  │     CONTENT        │  │  │  │ ← Tu texto, imagen, etc.
│  │  │  └────────────────────┘  │  │  │
│  │  └──────────────────────────┘  │  │
│  └────────────────────────────────┘  │
└──────────────────────────────────────┘

Content — El contenido del elemento (texto, imagen…).
Padding — Espacio entre el contenido y el borde. Es como el acolchado interior de una caja.
Border — El borde visible de la caja.
Margin — Espacio entre esta caja y las cajas vecinas. Es el espacio exterior.

El modelo de caja

Content + Padding + Border + Margin = el espacio total que ocupa un elemento. Padding es espacio dentro de la caja (afecta el fondo). Margin es espacio fuera de la caja (empuja a los vecinos).

Padding: el espacio interior

El padding crea espacio entre el contenido y el borde. Si tu caja tiene fondo, el padding se llena con ese fondo.

.card {
  padding: 20px;              /* Los 4 lados */
  padding: 20px 40px;         /* Vertical | Horizontal */
  padding: 10px 20px 30px;    /* Top | Horizontal | Bottom */
  padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}

También puedes usar propiedades individuales:

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

Pro tip

El orden de los valores es como las agujas del reloj: Top → Right → Bottom → Left (TRBL, que algunos recuerdan como “trouble”). Si solo pones dos valores, CSS asume que el vertical (top/bottom) es el primero y el horizontal (right/left) es el segundo.

Margin: el espacio exterior

El margin empuja a los elementos vecinos. Es transparente: no se llena con ningún fondo.

.card {
  margin: 20px;               /* Los 4 lados */
  margin: 0 auto;             /* Vertical 0 | Horizontal auto (centra) */
  margin-bottom: 2rem;        /* Solo abajo */
}

Centrar un elemento horizontalmente

.contenedor {
  max-width: 800px;
  margin: 0 auto;  /* ← Esto centra horizontalmente */
}

margin: 0 auto pone 0 arriba y abajo, y auto a izquierda y derecha. auto divide el espacio sobrante en partes iguales, centrando el elemento.

Colapso de márgenes

Cuando dos márgenes verticales se tocan, no se suman: el más grande gana. Esto se llama colapso de márgenes (margin collapsing).

h2 {
  margin-bottom: 20px;
}

p {
  margin-top: 15px;
}

El espacio entre <h2> y <p> será 20px (el mayor), no 35px. Esto solo pasa en dirección vertical, no horizontal.

Border: el borde visible

.card {
  border: 1px solid #1e1e35;      /* Grosor | Estilo | Color */
  border-radius: 8px;             /* Esquinas redondeadas */
  border-left: 3px solid #00ff41; /* Solo el borde izquierdo */
}

Estilos de borde comunes:

border: 1px solid gray;    /* Línea continua */
border: 2px dashed gray;   /* Línea punteada (guiones) */
border: 1px dotted gray;   /* Línea de puntos */
border: none;              /* Sin borde */

`border-radius` — Esquinas redondeadas

border-radius: 8px;         /* Todas las esquinas */
border-radius: 50%;         /* Convierte en círculo (si es cuadrado) */
border-radius: 8px 0 0 8px; /* Solo las esquinas izquierdas */

Width y height

Por defecto, width y height aplican solo al content. Esto significa que padding y border se suman al tamaño que tú defines:

.caja {
  width: 300px;
  padding: 20px;
  border: 2px solid gray;
}
/* Ancho real: 300 + 20 + 20 + 2 + 2 = 344px */

Esto es confuso. Si le dices a una caja “mide 300px”, esperas que mida 300px, no 344px.

`box-sizing: border-box` — La solución

.caja {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid gray;
}
/* Ancho real: 300px (padding y border incluidos) */

Con border-box, el width incluye todo: content + padding + border. El contenido se encoge para que todo quepa en los 300px que pediste.

Pro tip

Todos los proyectos profesionales usan border-box por defecto. Agrega esto al inicio de tu CSS y olvídate del problema:

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

Este selector universal aplica border-box a todos los elementos de la página.

Display: cómo se comporta la caja

La propiedad display controla cómo un elemento se comporta en el flujo del documento.

`block`

Ocupa todo el ancho disponible. Cada elemento block empieza en una nueva línea.

Elementos block por defecto: <div>, <p>, <h1>-<h6>, <section>, <article>, <header>, <footer>.

div {
  display: block;     /* Ya es block por defecto */
  width: 50%;         /* Puedes controlar el ancho */
  margin-bottom: 1rem;
}

`inline`

Solo ocupa el espacio de su contenido. No empieza en una nueva línea. No acepta width ni height.

Elementos inline por defecto: <span>, <a>, <strong>, <em>, <img>.

span {
  display: inline;     /* Ya es inline por defecto */
  /* width y height NO funcionan aquí */
}

`inline-block`

Combinación: se comporta como inline (no salta de línea) pero acepta width, height, margin y padding como un block.

.badge {
  display: inline-block;
  padding: 4px 12px;
  background: #00ff41;
  border-radius: 4px;
}

`none`

El elemento desaparece completamente. No ocupa espacio ni se muestra.

.oculto {
  display: none;
}

Ejercicio: Tarjetas con el modelo de caja

Crea una serie de tarjetas (cards) para practicar todas las propiedades del modelo de caja.

Crea un HTML con 3 <article> que representen tarjetas de un blog. Cada una debe tener un <h2> con el título, un <p> con una descripción, y un <a> con “Leer más”.
Aplica box-sizing: border-box globalmente con el selector *.
Estiliza cada tarjeta con:
- max-width: 400px
- padding: 1.5rem
- margin-bottom: 1.5rem
- border: 1px solid #1e1e35
- border-radius: 12px
- background: #13131f
Agrega un borde izquierdo de 3px verde (#00ff41) a cada tarjeta.
Estiliza el enlace como un botón: display: inline-block, padding, color de fondo, border-radius, sin subrayado.
Experimenta con las DevTools: inspecciona una tarjeta y observa el modelo de caja visual. Modifica padding y margin en tiempo real para ver cómo cambia.

Resumen

Todo elemento HTML es una caja rectangular con cuatro capas: content, padding, border y margin.
Padding es espacio interior (afecta el fondo). Margin es espacio exterior (separa de otros elementos).
Usa box-sizing: border-box siempre para que width incluya padding y border.
margin: 0 auto centra elementos horizontalmente.
Los márgenes verticales colapsan: el mayor gana, no se suman.
display controla el comportamiento: block (nueva línea, ancho completo), inline (fluye con el texto), inline-block (fluye pero acepta dimensiones), none (invisible).

Fuente oficial: The box model en MDN — explicación visual del modelo de caja con ejemplos interactivos.

Siguiente capítuloFlexboxEl sistema de layout más usado: alineación y distribución de elementos.

El modelo de caja

El modelo de caja

Todo es una caja

Padding: el espacio interior

Margin: el espacio exterior

Centrar un elemento horizontalmente

Colapso de márgenes

Border: el borde visible

border-radius — Esquinas redondeadas

Width y height

box-sizing: border-box — La solución

Display: cómo se comporta la caja

block

inline

inline-block

none

Resumen

`border-radius` — Esquinas redondeadas

`box-sizing: border-box` — La solución

`block`

`inline`

`inline-block`

`none`