Diferencia entre display: none y visibility: hidden en CSS

Durante la etapa de maquetación de un desarrollo web puede interesarnos ocultar mediante CSS un elemento en pantalla por diferente motivos, como puede ser cuando trabajamos con media queries para interactuar con las resoluciones de pantalla o cuando queremos manejar las propiedades del elemento con JavaScript.

En CSS hay varios modos dos modos de hacerlo pero lo habitual es usar display: none o visibility: hidden, dos propiedades que parecen similares pero que no lo son en cuanto a funcionamiento. Es por eso que cuando nos enfrentamos por primera vez a la decisión de si usar una u otra puede que nos venga a la cabeza la pregunta: ¿qué diferencia hay entre ambas propiedades? Eso es justo lo que vamos a ver a continuación.

Propiedad display: none de CSS

Si usamos la propiedad display ocultaremos totalmente el elemento en cuestión, incluyendo el espacio que ocupa. Es decir, será como si no existiera y los elementos de su alrededor actuarán en consecuencia a la hora de componer el diseño. Sirve para cuando queremos que la visibilidad del elemento afecte al diseño y que no se muestre nada, es decir none.

.elemento {
    display: none;
}

Propiedad visibility: hidden de CSS

Con la propiedad visibility podemos ocultar un elemento pero respetando el espacio que ocupa. Es decir, es como si el elemento se volviera totalmente transparente, de un modo similar a si redujéramos su opacidad a 0. Es por eso que los elementos circundantes sí que lo tendrán en cuenta a la hora de posicionarse. Este método nos sirve para cuando no queremos que haya cambios en la estructura de la web y solo queremos que el área parezca vacía pero que «físicamente» siga estando pero oculto, es decir hidden.

.elemento {
    visibility: hidden;
}

Por tanto la diferencia entre display: none y visibility: hidden es que mientras una propiedad hará que el elemento actúe en la maqueta como si éste no existiera, la otra propiedad no mostrará el elemento pero reservará el área que ocupa y el resto de la maqueta interactuará con éste.

Si deseas ampliar un poco más la información sobre el tema, puedes consultar esta otra entrada en la que hablo sobre la propiedad visibility de CSS y sus diferentes valores.