Entre las técnicas CSS para esconder elementos ante los ojos del usuario destacan el uso de visibility: hiddendisplay: none. Ambas reglas esconderán los elementos a los que se aplica pero con un resultado diferente.

Recordemos que hacen estas dos propiedades:

  • display: cada elemento en HTML se puede circunscribir a un rectángulo, referido generalmente como box o caja. El comportamiento de esta caja se puede controlar a través de la propiedad display que le dice al navegador como debe representarla: en línea (valor inline), como un bloque (valor block), etc. El valor display: none le dice al navegador que no lo represente; el resultado es que el elemento queda escondido y el espacio que debería ocupar colapsado.
  • visibility: controla la visibilidad del elemento, visible o no, pero no afecta a como el navegador representa la caja. Por tanto, visibility: hidden esconde el elemento pero el espacio que ocupa sigue representándose.

La principal diferencia entre ambas reglas es que display: none no reserva el espacio del elemento mientras que visibility: hidden. Esta ligera diferencia tiene como consecuencia que al mostrar o esconder un elemento, los demás elementos pueden moverse dependiendo de si se reservó el espacio o no, lo que puede ser importante en el diseño de una interfaz de usuario. Elegir un método u otro dependerá de cada caso concreto.

Ejemplo

En el siguiente ejemplo puedes probar el efecto de mostrar y esconder un elemento alternando entre display: nonedisplay: block y entre visibility: hiddenvisibility: visible:

  • ROSA ISELA RAMIREZ

    Perfecto me haz salvado de trabajar todo el fin de semana para ver porque no aparecia un elemento muchas gracias

  • Cristofer Fuentes

    yo prefiero usar el opacity: 0; en mis proyectos por que me permite realizar animaciones de “aparición” cuando las requiera.

    • Nada te impide hacer animaciones de “aparición” y a la vez utilizar visibility o display según necesites, igual que cambias el valor de opacity, puedes cambiar el valor de las otras reglas CSS de forma sincronizada.

      Si utilizas solo opacity: 0, el elemento no está escondido en lo que al DOM se refiere, por lo que sigue recibiendo todos los eventos del DOM: clic, hover, focus, ….. Y esto puede dar algunos problemas, por ejemplo problemas serios de accesibilidad.

    • Me has dado una idea para mejorar el post. Voy a incluir la información sobre opacity: 0.

      Muchas gracias!!

  • Sao4ever

    Muy interesante! Una cosa que no sabia, y que además me viene de las mil maravillas, pues suelo utilizar bastante el display: none
    Gracias!

  • Jaivark

    MUY buen datO!