Inicia sesión


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...


  • 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!






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial