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


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


926
2017-09-25 12:37


origen


Respuestas:


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

visibility:hidden significa que a diferencia 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 | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Reemplazando [style-tag-value] con display:none resultados en:

test |   | test

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

test |                        | test

1179
2017-09-25 12:40



Ellos no son sinónimos.

display:none quita 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 todavía 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.


184
2017-09-25 13:50



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 <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 aún ocupa espacio). Sin embargo, hay una diferencia entre 2 y 3: en el caso 3, el mouse aún cambiará a la mano al pasar el mouse por encima del enlace, y el usuario aún puede hacer clic en el enlace, y los eventos de Javascript seguirán activados en el enlace. Esto usualmente es no el comportamiento que quieres. El comportamiento al seleccionar texto también puede variar entre los navegadores.


82
2017-10-02 21:27



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

visibility:hidden lo esconde pero deja el espacio.


74
2017-09-25 12:39



Hay una gran diferencia cuando se trata de nodos secundarios. Por ejemplo: si tiene un div principal y un div hijo anidado. Entonces, 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 infantil estará visible mientras que el div principal no se mostrará.


53
2018-01-14 09:39



No son sinónimos - display: none quita 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 ello en la página.


17
2017-09-25 12:41



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 aunque ya no pueda verlo.

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


14
2017-09-25 12:40



Con visibility:hidden el objeto aún ocupa altura vertical en la página. Con display:noneestá completamente eliminado. Si tienes texto debajo de una imagen y lo haces 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.


11
2017-09-25 12:41