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 sí. 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: none y display: block y entre visibility: hidden y visibility: visible: Ver ejemplo...
