📦 Nivel 8 - Modelo de Caja CSS

📖 El Modelo de Caja

📦 ¿Qué es el Box Model?

En CSS, cada elemento es una CAJA rectangular. El Box Model define cómo se calcula el espacio que ocupa cada elemento.

📏 MARGIN (espacio externo)

🔲 BORDER (borde)

📦 PADDING (espacio interno)

CONTENIDO

Margin

Border

Padding

Content

💡 Recuerda

Margin: Espacio FUERA del elemento (separa de otros)

Border: El borde visible del elemento

Padding: Espacio DENTRO del elemento

Content: El contenido real (texto, imagen, etc.)

🧮 Calculando el tamaño total:

Ancho total = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

💡 Tip: Usa box-sizing: border-box; para que padding y border se incluyan en el width/height.

💻 Editor Box Model

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Box Model Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f9ff;
            padding: 40px;
        }
        
        h1 {
            color: #f97316;
            text-align: center;
        }
        
        .contenedor {
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* 📦 Caja con todos los componentes */
        .caja-ejemplo {
            /* Contenido */
            width: 300px;
            height: 150px;
            
            /* Padding (espacio interno) */
            padding: 20px;
            
            /* Border (borde) */
            border: 5px solid #f97316;
            
            /* Margin (espacio externo) */
            margin: 30px auto;
            
            /* Extras */
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
        }
        
        /* 🔲 Caja con box-sizing */
        .caja-border-box {
            width: 300px;
            height: 150px;
            padding: 20px;
            border: 5px solid #3b82f6;
            margin: 30px auto;
            background: #dbeafe;
            border-radius: 15px;
            
            /* ¡Esto es importante! */
            box-sizing: border-box;
        }
        
        .info {
            background: #fef3c7;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #f59e0b;
            margin: 20px 0;
        }
        
        .calculo {
            background: #16213e;
            color: #a5d6ff;
            padding: 15px;
            border-radius: 10px;
            font-family: monospace;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h1>📦 Modelo de Caja CSS</h1>
    
    <div class="contenedor">
        <div class="info">
            <strong>Caja 1:</strong> Sin box-sizing (content-box por defecto)
        </div>
        
        <div class="caja-ejemplo">
            <p>Esta caja tiene:</p>
            <p>width: 300px, padding: 20px, border: 5px</p>
        </div>
        
        <div class="calculo">
Ancho REAL = 300 + (20×2) + (5×2) = 350px</div>
        
        <div class="info">
            <strong>Caja 2:</strong> Con box-sizing: border-box
        </div>
        
        <div class="caja-border-box">
            <p>Esta caja también dice width: 300px</p>
            <p>¡Pero su ancho TOTAL es exactamente 300px!</p>
        </div>
        
        <div class="calculo">
Ancho REAL = 300px (incluye padding y border)</div>
    </div>
</body>
</html>

👁️ Vista Previa

Modelo de Caja CSS (Box Model)

📦 ¿Qué es el Box Model?

💡 Recuerda

🧮 Calculando el tamaño total:

🎛️ Controles

1. ¿Qué propiedad agrega espacio DENTRO del elemento?

2. Si una caja tiene width: 200px, padding: 10px y border: 5px, ¿cuál es el ancho TOTAL?

3. ¿Qué hace box-sizing: border-box?