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;
Valora esta entrada
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!

Entradas relacionadas:

Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 443
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Ejemplo de centrado vertical y horizontal con CSS
- 112
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Concepto de cascada en CSS
- 234
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Ejemplo de centrado horizontal de una caja con CSS
- 445
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Como centrar un texto mediante CSS y no con HTML
- 559
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Unidades de medida absolutas y relativas en CSS
- 324
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Concepto de herencia en CSS
- 284
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Factores que afectan al tiempo de carga de una página web
- 355
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 419
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 176
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.