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