El Modelo de Caja en CSS (versión práctica + teoría)

Tabla de contenidos

1 🧩 1. Estructura inicial (index.html)
2 🧱 2. Crear box.css (base vacía)
3 📏 3. Agregar padding
4 📦 4. Qué es el modelo de caja
5 🧮 5. Ejemplo con border y cálculo total
6 ⚙️ 6. El problema del diseño
7 🧠 7. Solución: box-sizing: border-box
8 🧩 8. Explicación de los selectores
- 8.1 *
- 8.2 , *::before, *::after
9 🧱 9. La coma en selectores
10 📄 10. Resumen visual
11 🎯 11. Conclusión
12 🧠 12. Mini‑retos

🧩 1. Estructura inicial (index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modelo de Caja en CSS</title>
  <link rel="stylesheet" href="box.css">
</head>
<body>
  <section class="hero">
    <h1>Modelo de Caja en CSS</h1>
    <p>Observa cómo cambian las dimensiones al aplicar padding y border</p>
  </section>
</body>
</html>

🧱 2. Crear box.css (base vacía)

/* box.css */
body {
  font-family: system-ui, sans-serif;
  background: #f9fafb;
  margin: 0;
  padding: 0;
}

.hero {
  background: #bae6fd; /* azul suave */
  width: 450px;
  height: 150px;
  margin: 40px auto;
}

“Antes de ver la diapositiva del Box Model, quiero mostrarte algo. Tenemos un bloque con ancho 450 píxeles. Si inspecciono el elemento, se ve en azul el área del contenido (‘content box’) y a la izquierda indica que mide 450 píxeles.”

📏 3. Agregar padding

.hero {
  background: #bae6fd;
  width: 450px;
  height: 150px;
  margin: 40px auto;
  padding: 20px;
}

🎙️ Explicación:

“Le agregué un padding de 20 píxeles. Si vuelvo a inspeccionar, ahora el elemento mide 490 px: 450 del contenido + 20 arriba + 20 abajo. Esto puede ser un problema si queremos que el bloque mida exactamente 450 px.”

📦 4. Qué es el modelo de caja

🎙️ Teoría breve:

“En CSS, todo es una caja. Cada elemento tiene 4 partes que definen su tamaño total:

Content (contenido real)

Padding (relleno interno)

Border (borde)

Margin (espacio externo)
Las tres primeras afectan el tamaño total del elemento; el margin sólo separa las cajas.”

🧮 5. Ejemplo con border y cálculo total

.hero {
  background: #bae6fd;
  width: 200px;
  padding: 20px;
  border: 10px solid #0284c7;
  margin: 40px auto;
}

🎙️ Explicación:

“Tenemos 200 px de contenido, 20 px de padding por lado (40 px más) y 10 px de borde por lado (20 más). Total: 260 px. Aunque declaramos 200 px, ocupa 260.”

⚙️ 6. El problema del diseño

🎙️ Contexto:

“En diseño, a veces te piden elementos de 200 px exactos, pero con padding y border se hacen más grandes. Tendrías que restar manualmente, algo poco práctico.”

🧠 7. Solución: box-sizing: border-box

/* Snippet moderno de Paul Irish */
html {
  box-sizing: border-box;
}

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

🎙️ Explicación:

“Este snippet hace que todos los elementos usen el modelo de caja ‘border-box’. Así, el width incluye el padding y el border. Si un bloque mide 450 px, seguirá midiendo 450 px aunque tenga padding.”

🔍 Demostración:

Devuelve .hero a width: 450px; padding: 20px; border: 10px solid; y muestra en DevTools que el total sigue siendo 450 px.

🧩 8. Explicación de los selectores

`*`

“Selecciona todos los elementos del HTML.”

`, ::before, ::after`

“Incluye los pseudo-elementos, que son contenidos virtuales agregados antes o después del contenido real.”

Ejemplo:

h1::after {
  content: " ← esto va después del título";
  color: #2563eb;
}

🎙️ Explicación:

“No aparece en el HTML, pero sí en CSS. Por eso también le aplicamos box-sizing.”

🧱 9. La coma en selectores

.titulo, .subtitulo {
  text-align: center;
  font-size: 3rem;
}

🎙️ Explicación:

“La coma permite aplicar las mismas reglas a varios selectores. Así evitamos repetir código.”

📄 10. Resumen visual

Capa	Qué representa	Afecta al tamaño total
Content	Contenido real	✅
Padding	Relleno interno	✅
Border	Borde	✅
Margin	Separación externa	❌

🎯 11. Conclusión

“El modelo de caja explica por qué los elementos miden más de lo que declaras. Con border-box, el tamaño total será exactamente el que defines. Es una buena práctica incluir este snippet en todos tus proyectos.”

🧠 12. Mini‑retos

Crea un bloque de 300 px con padding y border, mide su tamaño con y sin border-box.
Usa ::before o ::after para añadir texto decorativo.
Quita el snippet y observa cómo cambia el cálculo.
Muestra el diagrama en DevTools con cada versión.