Sommaire

La visibilité des Boîte:visibilitéboîtes

La Boîte:visibilitypropriété visibility permet de masquer une boîte avec la valeur hidden et de l’afficher avec la valeur visible. Attention, lorsqu’un élément est masqué avec la valeur hidden, il est simplement non affiché, mais la place utilisée pour son affichage est toujours conservée dans la fenêtre du navigateur. Par contre, avec la propriété display: none, non seulement l’élément n’est pas affiché, mais il est aussi retiré de la page, sans que son espace d’affichage soit conservé. Il convient donc de ne pas confondre l’utilisation de ces deux propriétés.

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       #cache { 
           visibility: hidden ;     
       } 
   </style> 
</head> 
<body> 
   <p>Pellentesque ornare sem lacinia quam venenatis...</p> 
   <p id="cache">Pellentesque ornare sem lacinia quam...</p> 
   <p>Pellentesque ornare sem lacinia quam venenatis...</p> 
</body>  ...