El Modelo de Caja

📦

¿Por qué todo en la web son cajas?

🚚 El Jarrón y el Envío

🔵 Content: El jarrón (el objeto).

🟢 Padding: Plástico de burbujas (dentro).

🟡 Border: La caja de cartón (límite).

🟠 Margin: El hueco en el camión (fuera).

🎨 El Código: "El Molde"

/* LISTA DE ÓRDENES PARA LAS CAJAS */
.caja-estilo {
  /* 1. EL JARRÓN (Content) */
  width: 300px;
  background-color: #3498db;

  /* 2. PLÁSTICO BURBUJAS (Padding) */
  padding: 30px;

  /* 3. CAJA CARTÓN (Border) */
  border: 10px solid #f1c40f;

  /* 4. HUECO CAMIÓN (Margin) */
  margin-bottom: 50px;

  /* EL CONTROL (Evita que engorde) */
  box-sizing: border-box;
}

SOY LA CAJA A

SOY LA CAJA B

El Margin crea los 50px de separación.

⚠️ ¿Qué hace el control "border-box"?

/* EFECTO GLOBO (Sin control) */
.globo {
  width: 300px;
  box-sizing: content-box;
  padding: 30px;
  border: 10px solid;
/* ¡AHORA MIDE 380px! (Suma fuera) */
}

/* EFECTO MALETA (Con control) */
.maleta {
  width: 300px;
  box-sizing: border-box;
  padding: 30px;
  border: 10px solid;
/* SIGUE MIDIENDO 300px (Todo dentro) */
}

❌ Sin Control (Globo)

CRECE

✅ Con Control (Maleta)

RESPETA

🔍 El Inspector F12

Raúl, así veo el body y las capas reales:

<body>
  <div class="caja">
    /* Azul: Contenido | Verde: Padding | Naranja: Margin */
  </div>
</body>

🧪 Simulador para Inspeccionar

CONTENIDO (JARRÓN)

Azul: Content

Verde: Padding (30px)

Amarillo: Border (20px)

Naranja: Margin (40px)