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:

Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
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.
La propiedad z-index
- 14
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 245
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...
Resumen de como comentar código en html, css y javascript
- 310
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 56
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 66
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
La propiedad overflow
- 15
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Dimensiones reales de una caja en CSS
- 110
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Box Sizing, como modificar el modelo de cajas convencional
- 76
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Concepto de cascada en CSS
- 141
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.
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.