La diferencia entre display:none y visibility:hidden

Los dos atributos CSS display:none y visibility:hidden permiten ocultar un elemento en el navegador.

Sin embargo, existe una pequeña diferencia:

• visibility: hidden oculta el elemento, pero sigue conservando el espacio que ocupaba, los elementos adyacentes conservan su ubicación.
• display:none quita el elemento definitivamente. El espacio que ocupaba, según sea el caso, es ocupado por los elementos adyacentes como si el elemento ya no existiera.

Imagen extraida de www.luiscanada.com

Ocultar imagen con display:none | Restaurar

Ocultar imagen con visibility:hidden | Restaurar

Esta entrada la hago porque varias veces me han preguntado lo mismo:

"Se me oculta la Navbar pero queda el espacio."

Al fijarme en el código veo que tiene el atributo visibility:hidden y no el display:none.

He notado muchas veces que en una ID o Clase, ponen los dos atributos. ¿Para que?, si solo con poner display:none cumple la función de ocultar.

Fuente: