Índice

Mostrar y ocultar las cajas

La propiedad CSS visibility determina si un elemento está visible u oculto.

visibility:

visible;

o bien hidden;

Comentarios

  • El valor visible muestra el elemento.

  • El valor hidden oculta el elemento.

    Preste atención, pues a pesar de establecer el valor hidden para esta propiedad, el elemento ocupa todavía su hueco en el documento y, en consecuencia, se muestra un rectángulo en blanco donde estuviera situado el elemento. De este modo, se conserva el formato de página a pesar de la ausencia (aparente) de la imagen, y los demás elementos de la página conservan su posición relativa inicial. El valor hidden difiere así de la propiedad display: none;, que elimina por completo el elemento de la página y no reserva sitio alguno.

Ejemplo

Con la propiedad visibility: hidden.

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
   <style type="text/css"> 
   .hidden { visibility: hidden;} 
   </style> 
</head> 
<body> 
<p>xxx xxx xxx xxx xxx xxx</p> 
<div class="hidden"> 
<img src="cup.png"> 
</div> 
<p>xxx xxx xxx xxx xxx xxx</p> 
</body> 
</html>
images/CAP19IMG11.png

La captura de pantalla muestra claramente que, aunque la imagen no está visible, sí se ha reservado el espacio asignado a ella ...