PRATIQUE CLIENTS WEB 
Différence entre visibility:hidden et display:none
 
"En CSS, deux propriétés permettent d'éviter d'afficher un élément : visibility et display. Pourquoi deux méthodes pour un même résultat ?" (18/07/2006)
  Forum

Réagissez dans les forums de JDN Développeurs

À la différence de Perl, les spécifications du W3C ne sont pas partisanes de l'adage "There is more than one way to do it" (Il y a plus d'une façon de le faire) : chaque règle a une utilité précise, qu'elle ne partage à priori pas avec ses congénères. Il en est de même pour CSS. Certes, visibility:hidden et display:none peuvent toutes les deux être utilisées pour "effacer" un élément, mais leurs comportements diffèrent.

Simplement, la propriété visibility gère la visibilité d'un élément, tandis que display gère son affichage. On pourrait croire qu'il s'agit là de synonymes, mais dans les faits, la première décide si on le voit, tandis que la seconde décide s'il l'affichage produit par le navigateur est présent .

Là où visibility:hidden laissera un espace entre les éléments précédant et suivant l'élément rendu invisible, display:none "efface" l'élément ciblé sans laisser de trace : les éléments précédents et suivants se retrouvent côte à côte, comme si l'élément visé n'existait pas.

Code CSS et HTML :
  1. div {
  2.   border: 1px solid black;
  3.   }
  4. .visibility {
  5.   visibility: hidden;
  6.   }
  7. .display {
  8.   display: none;
  9.   }
  1. <div>1 : Ceci est un div normal</div>
  2. <div class="visibility">2 : Ceci est un div avec visibility: hidden</div>
  3. <div>3 : Ceci est un div normal</div>
  4. <div class="display">4 : Ceci est un div avec display: none</div>
  5. <div>5 : Ceci est un div normal</div>
Résultats :

 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page