Ejercicio 31 — Propiedad Display en CSS

En este ejercicio se trabaja con la propiedad display de CSS, que permite definir cómo se comportan los elementos dentro del flujo del documento. Se experimenta con los valores block, inline, inline-block y none, además de añadir un poco de interactividad mediante JavaScript para mostrar un elemento inicialmente oculto.

Enunciado

Crear una lista de elementos con distintas etiquetas.
Aplicar display: block a un elemento.
Aplicar display: inline a varios elementos.
Usar display: inline-block como combinación de ambos modelos.
Ocultar un elemento con display: none.
Mostrar el elemento oculto mediante JavaScript.

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 Display</title>
    <link rel="stylesheet" href="display.css">
</head>
<body>

    <h1>Ejercicio Display</h1>

    <p class="definicion">
        La propiedad <b>display</b> sirve para definir cómo se comportan los elementos.
        Con <b>block</b> un elemento ocupa todo el ancho, con <b>inline</b> se colocan
        en la misma línea, con <b>inline-block</b> mezclan ambos comportamientos, y con
        <b>none</b> se ocultan.
    </p>

    <h2>Elementos de prueba</h2>

    <!-- display: block -->
    <div class="bloque">div con display: block</div>

    <!-- display: inline -->
    <span class="inLine">Inline 1</span>
    <span class="inLine">Inline 2</span>
    <span class="inLine">Inline 3</span>

    <!-- display: inline-block -->
    <p class="inlineblock">Caja 1</p>
    <p class="inlineblock">Caja 2</p>
    <p class="inlineblock">Caja 3</p>

    <!-- display: none -->
    <div id="oculto">Elemento oculto</div>

    <button id="mostrar">Mostrar elemento oculto</button>

    <script>
        document.getElementById("mostrar").onclick = () => {
            document.getElementById("oculto").style.display = "block";
        };
    </script>

</body>
</html>

Código CSS

/* 1. display: block */
.bloque {
    display: block;
    background-color: rgba(0, 248, 21, 0.973);
}

/* 2. display: inline */
.inLine {
    display: inline;
    background-color: rgb(183, 0, 255);
}

/* 3. display: inline-block */
.inlineblock {
    display: inline-block;
    background-color: aqua;
}

/* 4. display: none */
#oculto {
    display: none;
}

🚀 Ver resultado del ejercicio