Tema 5 · Modelo de Caja

El Modelo de Caja (Box Model)

Comprende el núcleo de la maquetación en CSS: contenido, padding, bordes y márgenes, y cómo la regla box-sizing: border-box soluciona los problemas de cálculo dimensional.

Tipografía, Fuentes Web y Texto Márgenes, Padding y Bordes

¿Qué es el Modelo de Caja?

En CSS, todo elemento HTML es tratado como una caja rectangular. El diseño de una página web no es más que la disposición armónica de cientos de cajas superpuestas o contiguas.

De adentro hacia afuera, cada caja está compuesta por 4 capas concéntricas:

  • 1. Contenido (Content): El área interna donde vive el texto, imágenes, iconos o elementos hijos. Se controla con width y height.
  • 2. Relleno (Padding): El espacio transparente entre el contenido y el borde exterior. Protege al texto de chocar contra los límites de la caja.
  • 3. Borde (Border): La línea divisoria que envuelve al padding y al contenido. Puede tener color, estilo y grosor.
  • 4. Margen (Margin): El espacio transparente exterior que separa la caja de sus elementos vecinos en la página.
Diagrama Técnico: Modelo de Caja en CSS3 y comparativa box-sizing

Diagrama 5.1: Las cuatro capas del Modelo de Caja y resolución de desbordes con box-sizing: border-box.

El Dilema: content-box frente a border-box

Por defecto histórico, los navegadores calculan las dimensiones de una caja usando box-sizing: content-box:

Modelo Cálculo de Ancho Total Resultado con width: 200px, padding: 20px, border: 5px
content-box
(Por defecto histórico)		 width + padding-izq + padding-der + border-izq + border-der 250px de ancho real en pantalla. ¡La caja se infla y rompe maquetaciones!
border-box
(Estándar moderno)		 width absorbe el padding y el borde internamente. 200px exactos en pantalla. El contenido se contrae para respetar la medida.

La Regla de Oro del CSS Moderno

Todo proyecto web profesional inicia con este reseteo universal en su hoja de estilos principal: 

/* Regla de oro: todas las cajas calculan su tamaño de forma intuitiva */
*, *::before, *::after {
  box-sizing: border-box;
}

⚡ Comparativa Visual: content-box vs border-box

Ambas cajas tienen declarado width: 260px y padding: 25px. Observa cómo la caja con content-box se desborda mientras que border-box mantiene el tamaño programado:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>El Modelo de Caja en CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      padding: 30px;
      color: #0f172a;
    }

    .guia-ancho {
      width: 260px;
      border-bottom: 2px dashed #94a3b8;
      font-size: 0.8rem;
      color: #64748b;
      margin-bottom: 6px;
      padding-bottom: 2px;
    }

    /* Caja clásica con content-box */
    .caja-content {
      box-sizing: content-box;
      width: 260px;
      padding: 25px;
      border: 4px solid #ef4444;
      background-color: #fee2e2;
      margin-bottom: 30px;
      border-radius: 8px;
    }

    /* Caja moderna con border-box */
    .caja-border {
      box-sizing: border-box;
      width: 260px;
      padding: 25px;
      border: 4px solid #10b981;
      background-color: #d1fae5;
      border-radius: 8px;
    }

    h4 {
      margin-top: 0;
      margin-bottom: 8px;
    }

    p {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.4;
    }
  </style>
</head>
<body>

  <h2>El Modelo de Caja en Acción</h2>
  <p style="color: #64748b; margin-bottom: 20px;">
    La línea de puntos representa exactamente 260px de referencia:
  </p>

  <div class="guia-ancho">--- 260px de referencia ---</div>
  <div class="caja-content">
    <h4 style="color: #991b1b;">1. content-box</h4>
    <p>
      Ancho visual real = 260 + 50 (padding) + 8 (bordes) = <strong>318px</strong>. Se expandió hacia afuera.
    </p>
  </div>

  <div class="guia-ancho">--- 260px de referencia ---</div>
  <div class="caja-border">
    <h4 style="color: #065f46;">2. border-box (Recomendado)</h4>
    <p>
      Ancho visual real = <strong>260px exactos</strong>. El padding y el borde están contenidos adentro.
    </p>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Cuál es el ancho real ocupado por un elemento con width: 200px, padding: 20px y border: 5px si tiene activado box-sizing: border-box?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.