display: none vs visibility: hidden Y tu, ¿cómo escondes las cosas?

display: none vs visibility: hidden Y tu, ¿cómo escondes las cosas?Entre las técnicas CSS para esconder elementos ante los ojos del usuario destacan el uso de visibility: hidden y display: none. Ambas reglas esconderán los elementos a los que se aplica pero con un resultado diferente.

Recordemos que hacen estas dos propiedades:


  • display: cada elemento en HTML se puede circunscribir a un rectángulo, referido generalmente como box o caja. El comportamiento de esta caja se puede controlar a través de la propiedad display que le dice al navegador como debe representarla: en línea (valor inline), como un bloque (valor block), etc. El valor display: none le dice al navegador que no lo represente; el resultado es que el elemento queda escondido y el espacio que debería ocupar colapsado.
  • visibility: controla la visibilidad del elemento, visible o no, pero no afecta a como el navegador representa la caja. Por tanto, visibility: hidden esconde el elemento pero el espacio que ocupa sigue representándose.

La principal diferencia entre ambas reglas es que display: none no reserva el espacio del elemento mientras que visibility: hidden sí. Esta ligera diferencia tiene como consecuencia que al mostrar o esconder un elemento, los demás elementos pueden moverse dependiendo de si se reservó el espacio o no, lo que puede ser importante en el diseño de una interfaz de usuario. Elegir un método u otro dependerá de cada caso concreto.

Ejemplo


En el siguiente ejemplo puedes probar el efecto de mostrar y esconder un elemento alternando entre display: none y display: block y entre visibility: hidden y visibility: visible: Ver ejemplo...


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-08-04
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!