Ejercicio 23 — Relleno en CSS

Este ejercicio se centra en el uso del padding (relleno interno) en CSS, aplicando relleno uniforme, relleno asimétrico y un relleno amplio en botones para observar cómo afecta al diseño interno de los elementos.

Enunciado

Crear tres secciones dentro de un archivo HTML.
Aplicar relleno uniforme de 20px a la primera sección.
Aplicar rellenos diferentes por lado a la segunda sección.
Aplicar un relleno grande al botón de la tercera sección.

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>Ejercicio 23 - Relleno</title>
    <link rel="stylesheet" href="relleno.css">
</head>
<body>
    <div class="seccion1">
        <h2>Relleno Uniforme</h2>
    </div>

    <div class="seccion2">
        <p>Relleno Asimétrico</p>
    </div>

    <div class="seccion3">
        <button>Relleno Grande</button>
    </div>
</body>
</html>

Código CSS

.seccion1 {
    padding: 20px;
    background-color: #cce5ff;
}

.seccion2 {
    background-color: #d4edda;
    padding: 10px 15px 20px 25px;
}

.seccion3 button {
    padding: 30px 50px;
    background-color: #f8d7da;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}

🚀 Ver resultado del ejercicio