Inicia sesión


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

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-04
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial

display: none vs visibility: hidden Y tu, ¿cómo escondes las cosas? display: none vs visibility: hidden Y tu, ¿cómo escondes las cosas?...
Tutoriales en linea
¿Te gusta el tutorial?




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






Cómo jugar Ajedrez Online TL

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-18
  • Categorias: WebSite Juegos Noticias Tutorial

Cómo encontrar un teléfono Android perdido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-17
  • Categorias: Android Telefonia Smartphone Tablet Tutorial

Configura tu servidor VPN en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-15
  • Categorias: Windows Internet Red Wifi Seguridad Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Introducción Al Lenguaje JS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial