Différence entre display:none et visibility:hidden

Dernière mise à jour le par christelle.b .

Les deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur.

Néanmoins, il existe une subtile nuance :

  • visibility: hidden rend le bloc concerné invisible. Cependant, il conserve toujours son emplacement et les blocs adjacents restent à leur place
  • display:none retire le bloc de l'affichage courant. Son emplacement est ainsi occupé, selon les cas, par les blocs adjacents, comme si le bloc n'était pas là !
Cet article est régulièrement mis à jour par des experts sous la
direction de Jean-François Pillou, fondateur de CommentCaMarche.
A voir également
Ce document intitulé « Différence entre display:none et visibility:hidden » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.