Ejercicio 22 — Márgenes en CSS

En este ejercicio se practica el uso de márgenes en CSS aplicando márgenes simples, asimétricos y automáticos. Cada sección utiliza una configuración distinta para comprender cómo afectan al posicionamiento y espaciado de los elementos en una página web.

Enunciado

Crear tres secciones con <div> y contenidos diferentes.
Aplicar margen uniforme de 20px a la primera sección.
Aplicar márgenes distintos por lado a la segunda sección.
Centrar el botón de la tercera sección con margin: auto.
Añadir margen superior de 50px al botón para separarlo correctamente.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="margenes.css">
</head>
<body>
    <div  class="seccion1">
        <h2>Margenes Simples</h2>
    </div>
    <div class="seccion2">
        <p>Margenes Asimetricos</p>
    </div>
    <div class="seccion3">
        <button>Margenes Automaticos</button>
    </div>
</body>
</html>

Código CSS

.seccion1{
    margin: 20px;
    background-color: rgb(10, 223, 10);
}

.seccion2{
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 40px;
    background-color: rgb(12, 65, 209);
}

.seccion3{
    margin: auto;
    margin-top: 50px;
}

🚀 Ver resultado del ejercicio