css - div - ¿Cuál es la diferencia entre visibilidad: oculta y visualización: ninguna?

title label html

Question

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

Answer 1

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

Answer 2

Con visibility:hidden el objeto todavía ocupa altura vertical en la página. Con display:none está completamente eliminado. 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.

Answer 3

Hay una gran diferencia cuando se trata de nodos secundarios. Por ejemplo: si tiene un div padre y un div hijo anidado. Así que si escribes así:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

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

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

Entonces el div hijo será visible mientras que el div padre no se mostrará.

Answer 4

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

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

Answer 5

Otra diferencia es que la visibility:hidden funciona en navegadores realmente, muy antiguos, y display:none no:

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

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

Answer 6

Si la propiedad de visibilidad está "hidden" , el navegador seguirá ocupando espacio en la página para el contenido, aunque sea invisible.
Pero cuando configuramos un objeto para "display:none" , el navegador no asigna espacio en la página para su contenido.

Ejemplo:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Ver detalles

Answer 7

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

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

En este caso obtienes:

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

La diferencia entre 1 y 2 ya se ha señalado (es decir, 2 todavía ocupa espacio). Sin embargo, hay una diferencia entre 2 y 3: en el caso 3, el mouse aún cambiará a la mano cuando se desplace sobre el enlace, y el usuario todavía puede hacer clic en el enlace, y los eventos de Javascript aún se activarán en el enlace. Normalmente este no es el comportamiento que quieres. El comportamiento al seleccionar texto puede variar entre los navegadores también.

Answer 8

display: none elimina el elemento de la página por completo, y la página se crea como si el elemento no estuviera allí en absoluto.

Visibility: hidden deja el espacio en el flujo de documentos aunque ya no pueda verlo.

Esto puede o no hacer una gran diferencia según lo que esté haciendo.

Answer 9

display:none; no mostrará el elemento ni asignará espacio para el elemento en la página mientras que la 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 mejor, mire el siguiente código: pantalla: ninguna vs visibilidad: oculta

Answer 10

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

visibility:hidden esconde pero deja el espacio.

Answer 11

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. pantalla: ninguno también afecta algunas de las propiedades disponibles de javascript en versiones anteriores de IE y Safari.

Answer 12

display:none significa que la etiqueta en cuestión no aparecerá en la página en absoluto (aunque todavía puede interactuar con ella a través del dominio). No habrá espacio asignado para ello entre las otras etiquetas.

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

Por ejemplo:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | 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

Answer 13

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.

Answer 14

visibility:hidden oculta un elemento, pero seguirá ocupando 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í:

Answer 15

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

Answer 16

No son sinónimos.

display:none elimina el elemento del flujo normal de la página, permitiendo que otros elementos se 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 la fila para un paseo en un parque de diversiones y alguien en la línea se pone tan ruidoso que la seguridad los saca de la línea. Todos los que están en línea luego avanzarán una posición para llenar la ranura ahora vacía. Esto es como display:none .

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

Answer 17

display: none; 

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

visibility: hidden; 

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

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

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

Visibilidad oculta Ejemplo: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility