¿Cuál es la diferencia entre visibilidad: oculta y pantalla: ninguna?

La visibility:hidden reglas de CSS visibility:hidden y display:none como resultado que el elemento no sea visible. Son estos sinónimos?

display:none significa que la etiqueta en cuestión no aparecerá en absoluto en la página (aunque aún puedes interactuar con ella a través del dom). No habrá espacio asignado para él entre las otras tags.

visibility:hidden significa que, a diferencia de la display:none , la etiqueta no está visible, pero se le asigna espacio en la página. La etiqueta se representa, simplemente no se ve en la página.

Por ejemplo:

 test | Appropriate style in this tag | test 

Reemplazando [style-tag-value] con display:none da como resultado:

 test | | test 

Reemplazando [style-tag-value] con visibility:hidden resultados visibility:hidden en:

 test |                       | test 

Ellos no son sinónimos.

display:none elimina el elemento del flujo normal de la página, permitiendo que otros elementos completen.

visibility:hidden deja el elemento en el flujo normal de la página, de modo que aún ocupa espacio.

Imagina que estás en línea para dar un paseo en un parque de atracciones y alguien en la fila se pone tan alborotado que la seguridad los saca de la fila. Todos los que estén en línea avanzarán una posición para llenar el espacio ahora vacío. Esto es como display:none .

Compare esto con la situación similar, pero que alguien frente a usted se ponga una capa de invisibilidad. Mientras ve la línea, parecerá que hay un espacio vacío, pero la gente no puede llenar ese espacio vacío porque alguien todavía está allí. Esto es como visibility:hidden .

Una cosa que vale la pena agregar, aunque no fue preguntada, es que hay una tercera opción para hacer que el objeto sea completamente transparente. Considerar:

 1st unseen link.
2nd unseen link.
3rd unseen link.

display:none elimina el elemento del flujo de diseño.

visibility:hidden oculta pero deja el espacio.

Hay una gran diferencia cuando se trata de nodos secundarios. Por ejemplo: si tiene un div principal y un div hijo nested. Entonces, si escribes así:

  

En este caso, ninguno de los divs será visible. Pero si escribes así:

  

Entonces el div infantil estará visible mientras que el div principal no se mostrará.

No son sinónimos: display: none elimina el elemento del flujo de la página y el rest de la página fluye como si no estuviera allí.

visibility: hidden oculta el elemento de la vista pero no el flujo de página, dejando espacio para ello en la página.

display: none elimina completamente el elemento de la página, y la página se genera como si el elemento no estuviera allí.

Visibility: hidden deja el espacio en el flujo de documentos a pesar de que ya no se puede ver.

Esto puede o no hacer una gran diferencia dependiendo de lo que esté haciendo.

Con visibility:hidden el objeto aún ocupa altura vertical en la página. Con display:none se elimina por completo. Si tiene texto debajo de una imagen y display:none , ese texto se desplazará hacia arriba para llenar el espacio donde estaba la imagen. Si haces visibilidad: oculto, el texto permanecerá en la misma ubicación.

display:none ocultará el elemento y colapsará el espacio que estaba ocupando, mientras que visibility:hidden ocultará el elemento y conservará el espacio de los elementos. display: none también afecta algunas de las propiedades disponibles de javascript en versiones anteriores de IE y Safari.

Si la propiedad de visibilidad se establece en "hidden" , el navegador aún ocupará espacio en la página para el contenido aunque sea invisible.
Pero cuando establecemos un objeto para "display:none" , el navegador no asigna espacio en la página para su contenido.

Ejemplo:

 
Content not display on screen and even space not taken.
Content not display on screen but it will take space on screen.

Ver detalles

Además de todas las otras respuestas, hay una diferencia importante para IE8: si usa display:none e intenta obtener el ancho o alto del elemento, IE8 devuelve 0 (mientras que otros navegadores devolverán los tamaños reales). IE8 devuelve el ancho o la altura correctos solo para visibility:hidden .

visibility:hidden mantendrá el elemento en la página y ocupará ese espacio pero no se mostrará al usuario.

display:none no estará disponible en la página y no ocupa ningún espacio.

visibility:hidden oculta un elemento, pero ocupará el mismo espacio que antes. El elemento estará oculto, pero aún afectará el diseño.

display:none oculta un elemento y no ocupará espacio. El elemento se ocultará y la página se mostrará como si el elemento no estuviera allí:

visibility:hidden conservar el espacio, mientras que display:none no conserva el espacio.

Otra diferencia es la visibility:hidden trabajos visibility:hidden en los navegadores realmente antiguos y la display:none no:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

 display: none; 

No estará disponible en la página y no ocupará ningún espacio.

 visibility: hidden; 

oculta un elemento, pero ocupará el mismo espacio que antes. El elemento estará oculto, pero aún así, afectará el diseño.

visibility: hidden conservar el espacio, mientras que display: none no conserva el espacio.

Visualizar ninguno Ejemplo: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Ejemplo oculto de visibilidad: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

display:none; no mostrará el elemento ni asignará espacio para el elemento en la página mientras que visibility:hidden; no mostrará el elemento en la página pero asignará espacio en la página. Podemos acceder al elemento en DOM en ambos casos. Para entenderlo de una mejor manera, mira el siguiente código: display: none vs visibility: hidden