Diferencia entre display:none y visibility:hidden

Tiempo estimado de lectura: 3 minutos

 

Cual es la diferencia entre display:none y visibility:hidden

En esta ocasión vamos a ver la diferencia entre entre display:none y visibility:hidden. Hoy mucha gente que confunde estas dos propiedades, pero aunque las dos sirven para ‘esconder’ elementos de tu web, no funcionan de la misma forma. Hoy veremos cuales son sus diferencias y cuando usar uno u otro.

¡Vamos a ello!.

La propiedad display

En resumen, esta propiedad establece qué elementos se van a mostrar dentro de tu página web. Por lo general, cada elemento tiene su propio valor display predeterminado. Los más comunes son inline y block.

El valor inline hace que el objeto se comporte como si fuera un elemento en linea, con lo que respeta el ancho, el alto y los márgenes verticales. Imagínatelo como si este objeto estuviera dentro de otro. Piensa en una galería de fotos de 3 columnas, cuando añades una imagen más. en lugar de añadir una nueva columna, se crea una nueva fila.

El valor block hace que los objetos no fluyan como texto, sino que se muestren como objeto en una línea, por lo que se mostrarán uno debajo del otro. Piensa en la galería de fotos del ejemplo anterior, cuando la ves en tu teléfono o en tu tablet, las imágenes se colocan una debajo de otra, con lo que solo hay una imagen por línea (responsive).

La propiedad visibility

Esta propiedad establece la visibilidad de un elemento. Cuando utilizamos el valor hidden, hacemos que el elemento en cuestión no sea visible, pero al contrario que con display:none, no reserva el espacio que debería ocupar. Esta propiedad se suele utilizar para mostrar contenido al producirse un evento, por ejemplo cuando el usuario inicia sesión y se le muestra el contenido oculto.

En resumen: diferencia entre display:none y visibility:hidden

La propiedad display:none le indica al navegador que no represente ese objeto. El resultado es que el objeto no se ve, pero el espacio que debería ocupar este elemento, queda reservado.

La propiedad visibility:hidden controla la visibilidad del elemento (visible o invisible), y no afecta al espacio que debería ocupar este.

Diferencia entre display:none y visibility:hidden
Diferencia entre display:none y visibility:hidden

¿Te ha servido este artículo?, DALE CARIÑO. 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *