Diferencia entre visibility:hidden; y display:none;

Diferencia entre visibility:hidden; y display:none;

Print Friendly, PDF & Email
Diferencia entre visibility:hidden; y display:none;
5 (100%) 1 voto

Existen ocasiones en las que nos interesa controlar la visibilidad de una etiqueta en un documento web. Por ejemplo hacer que un bloque esté oculto y mostrarlo cuando nos interese o viceversa.

Las propiedades que nos pueden ayudar en esta tarea son display y visibility, cuyos valores de estudio para este tutorial CSS son:

display: block | inline | inline-block | none ;

visibility: visible | hidden ;

En los dos casos podemos conseguir ocultar un bloque pero existen algunas diferencias.

Para ilustrarlas hemos escrito un documento web con el siguiente código que podéis copiar y navegar en vuestro editor de código.

Nota: para reducir el espacio ocupado por el código se han eliminado las cajas 2 a la 8. Si reproducís el ejemplo pensar en añadirlas por vuestra cuenta.

<!DOCTYPE html>
<html>
<head>
	<title>Diferencia entre display:none y visibility:hidden - F.Ricart</title>
	<meta charset="utf-8">
	
	<style type="text/css">
	
	div[class|="caja"]{
		float:left;
		padding:30px;
		margin:20px;
		border:2px solid #666;
		max-width:350px;
	}

	.caja-container .caja-5{display:none;}
	.caja-container-2 .caja-5{visibility:hidden;}

	</style>
</head>
<body>

<div class="caja-container">
	<h2>Display: None</h2>
	<div class="caja-1">
	<p>1</p>
	</div>

    <!--Cajas de la 2 a la 8-->
	
	<div class="caja-9">
	<p>9</p>
	</div>

</div>
<div class="caja-container-2">
	<h2>Visibility: hidden</h2>
	<div class="caja-1">
	<p>1</p>
	</div>

    <!--Cajas de la 2 a la 8-->

	<div class="caja-9">
	<p>9</p>
	</div>
</div>

</body>
</html>

Si copiáis y pegáis el código y añadís los bloques que faltan el resultado debería ser como en la imagen:

Diferencia entre visibility y display
  • En el caso de display:none fijaros que la caja 5 está oculta pero que las cajas 6 a 9 se han desplazado para ocupar los espacios vacíos generados.
  • En el caso de visibility:hidden fijaros que la caja 5 está oculta y que las cajas 6 a 9 han permanecido en su lugar natural.

¡Hola!

Querido lector,

Normalmente la propiedad que más he visto usar es display:none; ¡Pero esta es mi opinión sesgada!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.