display

<< cursor visibility >>

Indica cómo se representa un elemento en la página (o incluso si se ocultará). Podemos cambiar la propiedad de un elemento, de tal forma que un tipo de elemento como <span> se pudiese comportar como si fuera otro (<div> por ejemplo):

none: El elemento no se dibujará.
block: El elemento será de tipo “bloque" (como <div> o <p> por ejemplo), teniendo entre otras cosas, un salto de línea al principio y al final.
inline: Lo contrario que lo anterior. El elemento se alineará con el resto del texto o contenido eliminándose los salto de línea al principio y final.
inline-block: Es una mezcla de los dos anteriores, Permite que un elemento de bloque se comporte como si fuera un elemento en línea pero conservando algunas propiedades de bloque como la posibilidad de definir su anchura/altura.
grid: para definir rejillas CSS con su filas y columnas. Lo veremos en el punto de Posicionamiento de elementos con grid
list-item: El elemento se comportará como si fuera un elemento tipo <li> (elemento de una lista).
table: El elemento se comportará como si fuera un elemento <table>
table-row: El elemento se comportará como si fuera un elemento <tr>
table-cell: El elemento se comportará como si fuera un elemento <td>
Y muchos otros....

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejemplo selectores</title>
    <link rel="stylesheet" href="visibilidad.css" />
  </head>
  <body>
    <main>
        <article class="container">
            <span>First</span>
            <span>Second</span>
            <span>Third</span>
          </article>
          
          <article class="container">
            <span>First</span>
            <span>Second</span>
            <span>Third</span>
          </article>
    </main>
  </body>
</html>

<< cursor visibility >>