Diferencia entre display: none y visibility: hidden en CSS

El otro día en nuestra batalla diaria por la comprensión del concepto ‘en esas horas no da tiempo a hacerlo’, nos topamos con una duda, que si bien no es nada del otro mundo, no nos había asaltado hasta ahora.

Se trata de la pregunta ¿qué diferencia hay entre display:none y visibility: hidden en CSS?. Seguro que hemos sembrado la duda en más de uno, pero os preocupéis, que nuestra intención es aclararlo y así contribuir a la evolución de la especie humana (nos marcamos objetivos sencillos). Vamos al grano.

Propiedad visibility: hidden

Con la propiedad de CSS visibility, podemos ocultar una capa o un elemento en cuestión, pero respetando el espacio que ocupaba. Un ejemplo para su uso podría ser la precarga de una capa, reservas su espacio y luego cuando la muestres, aparecerá en el espacio reservado, sin alterar las capas circundantes.

Propiedad display: none

Con la propiedad display ocultaremos totalmente el elemento en cuestión, incluyendo el espacio que ocupa. De modo que las capas que se encuentra a su alrededor, actuarán como si ésta no existiera.

Así pues en nuestra tremenda sabiduría de grupo que nos lleva a explorar las sendas de las hojas de estilo, dimos respuesta a este pequeño e insignificante misterio del universo.