Diferencia entre visibility:hidden; y display:none;

4
(2)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

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

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:hidden; y display:none; 2

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

Deja una respuesta

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