Ejercicio 25 — Modelo de Caja en CSS

En este ejercicio se aplica el modelo de caja (box model) de CSS a un único elemento <div>, utilizando propiedades fundamentales como fondo, ancho, alto, borde, relleno y margen. El objetivo es comprender cómo se calcula el tamaño total de un elemento.

Enunciado

Crear un div con fondo gris.
Aplicar un tamaño de 300×300 píxeles.
Añadir un borde sólido verde de 15px.
Añadir un relleno interno de 50px.
Añadir un margen externo de 20px.
Calcular el tamaño total del div.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Caja con Dimensiones</title>
    <link rel="stylesheet" href="Ejercicio25.css">
</head>
<body>

    <div class="seccion1"> 
        Este es un texto dentro del div.
    </div>

</body>
</html>

Código CSS

.seccion1 { 
    background-color: rgb(97, 93, 93);
    width: 300px;
    height: 300px;
    border: 15px solid rgb(21, 212, 21);
    padding: 50px;
    margin: 20px;
}

Cálculo del tamaño total del div

El tamaño total del div es de 430px × 430px.

🚀 Ver resultado del ejercicio