display: none vs visibility: hidden Y tu, ¿cómo escondes las cosas?

Entre las técnicas CSS para esconder elementos ante los ojos del usuario destacan el uso de visibility: hidden y display: 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 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: