visibility
Indica si un elemento debe estar oculto (invisible) o permanecer visible.
- visible: Valor por defecto. El elemento se mostrará.
- hidden: El elemento se ocultará (útil si queremos hacer un mapa oculto de la web para que los buscadores puedan navegar mejor por nuestra página y que los usuarios no lo vean.
¿Qué diferencias hay entonces entre display: none y visibility: hidden?
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Visibility CSS</title>
<link rel="stylesheet" href="visibility-styles.css">
</head>
<body>
<div class="caja normal">Caja 1: Soy normal</div>
<div class="caja oculta">Caja 2: ¡Soy invisible!</div>
<div class="caja normal">Caja 3: Estoy justo después de la caja invisible.</div>
<hr>
<div class="contenedor-padre">
<div class="caja-hija">Caja de menú visible</div>
<div class="caja-hija menu-oculto">Menú Oculto (pero visible al pasar el ratón)</div>
</div>
</body>
</html>La diferencia entre visibility: hidden y display: none es:
- visibility: hidden; El elemento es invisible pero ocupa espacio.
- display: none; El elemento es totalmente eliminado del diseño, no ocupa espacio.