visibility

<< display float >>

Indica si un elemento debe estar oculto (invisible) o permanecer visible.

  • visible: Valor por defecto. El elemento se mostrará.
  • hidden: El elemento se ocultará (útil si queremos hacer un mapa oculto de la web para que los buscadores puedan navegar mejor por nuestra página y que los usuarios no lo vean.

¿Qué diferencias hay entonces entre display: none y visibility: hidden?

* {
    padding-top: 10px;
}

article:first-child{
    background-color: red;
    /* display: none; */  /* Desaparece la visualización de un elemento  */
   visibility: hidden;
}

article span {
    background-color: black;
    color: white;
    margin: 1px;
}

article,
span {
    padding: 10px;
    border-radius: 7px;
}

article,
div {
    margin: 20px;
}

<< display float >>