Boîtes bloc, boîtes en ligne et propriété display

Selon le modèle de mise en forme visuelle CSS , chaque élément HTML représenté dans la zone d'affichage de votre navigateur engendre une boîte. La manière dont ces boîtes s'agencent pour composer le rendu graphique d'une page Web dépend de cinq facteurs principaux :

• deux séries de données « extérieures » :

  1. l'organisation du document HTML, c'est à dire la succession et l'emboîtement des éléments générateurs de boîtes ;

  2. des dimensions déterminées par ailleurs, telles que la taille de la zone d'affichage (la fenêtre du navigateur), la taille des images, etc ;

• trois facteurs « proprement CSS » :

  1. le mode de positionnement de chaque boîte : en flux normal, en position relative, flottante, absolue ou fixe ;

  2. son type : boîtes bloc, en ligne, en enfilade ;

  3. ses dimensions, déterminées notament en fonction de l'un ou l'autre des deux modèles de boîte concurrents : le modèle standard et le modèle propriétaire Microsoft.

Nous avons déjà traité, parmi les facteurs « proprement CSS », des dimensions des boîtes et de leur mode de positionnement en flux/relatif, flottant ou absolu/fixe. Précisons à présent les types de boîtes bloc et en ligne, ainsi que l'usage de la propriété display qui permet de les manipuler.

Deux grands types de boîtes

Voici les deux principaux types de boîtes qui seront traités différemment lors de leur affichage par le navigateur :

• boîte de type bloc pour les titres h1...h6, les paragraphes p, les blockquote, les listes ul, li et dl, les tableaux, les div, etc ;

  par défaut, une boîte de type bloc ne peut pas être flanquée d'une autre boîte à sa droite ou à sa gauche : elle est précédée et suivie d'une sorte de passage à la ligne ;

• boîte de type en ligne pour les hyperliens a, les images img, les portions de texte délimitées par em, strong, les citations q, les span, etc ;

  par défaut, une boîte en ligne n'est ni précédée, ni suivie d'un passage à la ligne.

Une boîte bloc peut contenir :

• d'autres boîtes blocs ; par exemple, un paragraphe dans un bloc de citation : <blockquote><p>...</p></blockquote> ;

• des boîtes en-ligne ; par exemple, un lien dans un paragraphe : <p><a href="...">...</a></p> ;

Une boîte en ligne peut contenir d'autres boîtes en ligne.

L'élément body (en HTML) et l'élément html (en XHTML) engendrent le bloc conteneur initial qui joue le rôle de boîte englobant le tout. Ce bloc initial peut avoir une largeur, une hauteur, des marges, des bordures et un remplissage, mais il ne peut pas être positionné ou flottant.

Passer d'un type à l'autre : la propriété display

La propriété CSS display permet de forcer une boîte à se comporter au choix en boîte de type bloc, en ligne ou en enfilade. Voici quelques exemples de ses utilisations :

Les listes horizontales : transformer une boîte bloc en boîte en ligne

Les listes ul, ol, dl déterminent des emboîtements de boîtes bloc. Typiquement :

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Sera affiché verticalement :

Mais dotée des propriétés display: inline et list-style-type: none, elle devient une série d'élément en ligne illustrés par la figure ci-dessous :

Les propriétés de bordure (border) et de remplissage (padding) des éléments li permettent de présenter à sa guise cette liste mise à l'horizontale. Par exemple :

.enligne li {
  display: inline;
  list-style-type: none;
  padding: 0.5em;
  background-color: #ffecce;
  border: 1px solid #666666;
  margin: 1em;
}

Appliqué à :

<ul class="enligne">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Donnera :

Les liens en colonne : transformer une boîte ligne en boîte bloc

A l'inverse, une série de liens placés dans un paragraphe, sur le modèle :

<p>
  <a href="...">lien 1</a>
  <a href="...">lien 2</a>
  <a href="...">lien 3</a>
</p>

Sera affiché par défaut sous forme de ligne :

Pourquoi ne pas la disposer en colonne, sans recourir à un élément br que ne justifierait que le souci de la présentation, en précisant simplement dans la feuille de style a {display: block;} ? Cette série de liens se dispose alors verticalement :

L'ajout d'un séparateur améliorera l'accessibilité de ces liens (la présence d'un caractère imprimable évite que les navigateurs vocaux ne confondent les liens entre eux). Affectons à ce caractère la propriété visibility: hidden afin de le cacher dans les navigateurs graphiques.

En HTML :

<p class="enbloc">
  <a href="...">lien 1</a>
  <span>|</span>
  <a href="...">lien 2</a>
  <span>|</span>
  <a href="...">lien 3</a>
</p>

Et en CSS :

.enbloc a {
  display: block;
  margin: 0 2em;
}
.enbloc span {
  visibility: hidden
}

Le résultat visuel sera identique au précédent, mais ne posera pas de problème d'accessibilité, puisqu'un navigateur y verra en fait :

Conclusion

La propriété display permet donc de manipuler à sa guise le comportement des éléments bloc et en ligne, tout en préservant une structure correcte grâce à l'absence de recours à un balisage impropre dans un souci de présentation.