CSS > Mode d'affichage

visibility: hidden permet de cacher un élément sans qu'il y ait de conséquences sur la mise en page du document, c'est à dire que l'espace initialement occupé par l'élément est conservé.

Exemple appliqué au second paragraphe :

• visibility: hidden;
• visibility: normal;

display: none permet de cacher un élément et de libérer l'espace occupé par l'élément dans le document.

Exemple appliqué au second paragraphe :

• display: none;
• display: normal;

Pour plus d'information sur les balises de type "block" (bloc) et les balises de type "inline" (en ligne), voir le chapitre XHTML > Blocs et conteneurs

display: inline permet de convertir un élément de type "block" en type "inline".

display: bloc permet de convertir un élément de type "inline" en type "block".

Exemple sur une liste de liens :

  <style type="text/css">
  #links2 li {
    padding-right: 20px;
    display: inline;
  }
  </style>

  <ul id="links1">
  <li><a href="http://www.site1.fr/">www.site1.fr</a></li>
  <li><a href="http://www.site2.fr/">www.site2.fr</a></li>
  <li><a href="http://www.france.fr/">www.france.fr</a></li>
  </ul>

  <ul id="links2">
  <li><a href="http://www.site1.fr/">www.site1.fr</a></li>
  <li><a href="http://www.site2.fr/">www.site2.fr</a></li>
  <li><a href="http://www.france.fr/">www.france.fr</a></li>
  </ul>