Afficher les éléments les uns par rapport aux autres

Tu ajoutes sur une page trois paragraphes et trois courtes étiquettes dans des balises <span>. Les paragraphes se placent les uns sous les autres, tandis que les étiquettes restent alignées sur une même ligne - alors que tu n'as pas écrit une seule ligne de CSS. D'où vient cette différence ? La réponse se cache dans la propriété display, qui décide comment la boîte d'un élément se place par rapport à ses voisins.

Les éléments de type bloc - les uns sous les autres

Regardons un exemple. Voici trois paragraphes écrits dans le code l'un après l'autre, sans aucun style :

1<p>Paragraphe 1</p>
2<p>Paragraphe 2</p>
3<p>Paragraphe 3</p>

Les paragraphes s'affichent les uns sous les autres. Chacun commence sur une nouvelle ligne et s'étend sur toute la largeur de son parent, même si son texte n'en occupe qu'une petite partie. C'est ainsi que fonctionnent les éléments de type bloc - comme les blocs de pierre d'une pyramide, dont chacun occupe toute une assise.

Les éléments en ligne - côte à côte

Regardons un autre cas. Les trois mêmes lignes, mais écrites cette fois avec la balise <span> au lieu de <p> :

1<span>Span 1</span>
2<span>Span 2</span>
3<span>Span 3</span>

Tous les éléments s'afficheront côte à côte. Par défaut, un paragraphe est un élément de type bloc, et un span est un élément en ligne : il n'occupe que la place dont son contenu a besoin, et il s'écoule dans la ligne de texte comme un hiéroglyphe dans un vers. Les retours à la ligne entre les spans, dans le code, se sont transformés en simples espaces - c'est pourquoi on voit un écart entre les étiquettes.

Les trois valeurs les plus importantes de display

Les valeurs de la propriété display, comme l'affichage en ligne, en bloc et d'autres encore, sont des éléments clés du CSS qui décrivent la façon dont les éléments HTML sont présentés sur la page. Voici la description de trois valeurs populaires :

• inline : les éléments dont la propriété display vaut inline ne commencent pas sur une nouvelle ligne et n'occupent que la place dont ils ont besoin. Des exemples d'éléments en ligne sont <span>, <a> et <img>.
• block : les éléments dont la propriété display vaut block commencent sur une nouvelle ligne et occupent toute la largeur disponible du conteneur. Des exemples d'éléments de type bloc sont <div>, <p> et <h1>.
• inline-block : l'élément se comporte comme un élément en ligne, mais tu peux lui appliquer des propriétés des éléments de type bloc, comme la largeur et la hauteur.

Un élément en ligne ignore width et height. L'exception est <img>, un élément dit remplacé : malgré display: inline, les dimensions s'y appliquent normalement. Tu peux cependant donner chacune de ces valeurs à n'importe quel élément. Transformons les spans en tuiles de même taille, qui restent côte à côte :

1span {
2  display: inline-block;
3  width: 100px;
4  height: 80px;
5}

Les spans restent sur une même ligne, mais ils mesurent maintenant 100px de large et 80px de haut - comme des statues alignées en rang régulier dans un temple. Le HTML n'a pas changé : un span reste un span, seule la façon dont sa boîte se place sur la page a changé.

display: none - l'élément disparaît

Il existe encore une valeur que tu utiliseras très souvent. Parfois, tu veux qu'un élément disparaisse complètement de la page, par exemple un menu replié :

1.masque {
2  display: none;
3}

Un élément qui a cette classe n'est pas affiché et n'occupe aucune place - ses voisins se déplacent comme s'il n'existait pas dans le document. Son code se trouve pourtant toujours dans le fichier HTML. Attention aux déclarations semblables : visibility: hidden et opacity: 0 cachent elles aussi un élément, mais laissent un espace vide à sa place. Un élément en display: none n'occupe aucune place, inline et inline-block occupent autant de place que leur contenu en a besoin (inline-block peut aussi recevoir ses propres dimensions), et block toute la largeur de son parent.

Les autres valeurs de display

Il existe aussi d'autres valeurs de la propriété display, comme flex, grid et table. Un élément dont display vaut flex devient un conteneur flexbox, ce qui permet une disposition et une gestion avancées de ses descendants. Un élément dont display vaut grid devient un conteneur de grille CSS, ce qui permet de créer des mises en page plus complexes, qui s'adaptent à la taille de l'écran. Enfin, si un élément a display défini sur table, il se comporte comme un élément de tableau HTML, ce qui permet de mettre en forme et d'organiser des données dans une structure de tableau. Tout le module suivant est consacré à Flexbox, et la grille CSS Grid est traitée dans le module sur la conception de page.

Mon conseil : ne change pas display à l'aveugle. Vérifie d'abord dans les outils de développement, dans l'onglet Computed (Calculé), quelle valeur l'élément a par défaut.

Pratique

Dans l'éditeur ci-dessous, tu verras les trois comportements à la fois : les paragraphes de type bloc, les spans en ligne et les tuiles inline-block. Essaie de donner une largeur aux spans et vérifie si quelque chose change :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Display en CSS</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>L'affichage des éléments</h1>
10
11    <h2>Éléments de type bloc (block)</h2>
12    <p class="block-el">Paragraphe 1 - élément de type bloc</p>
13    <p class="block-el">Paragraphe 2 - élément de type bloc</p>
14    <p class="block-el">Paragraphe 3 - élément de type bloc</p>
15
16    <h2>Éléments en ligne (inline)</h2>
17    <span class="inline-el">Span 1</span>
18    <span class="inline-el">Span 2</span>
19    <span class="inline-el">Span 3</span>
20
21    <h2>Inline-block</h2>
22    <div class="inline-block-el">Boîte A</div>
23    <div class="inline-block-el">Boîte B</div>
24    <div class="inline-block-el">Boîte C</div>
25</body>
26</html>

Retiens : block est un bloc de pierre qui occupe toute une assise de la pyramide, inline est un hiéroglyphe qui s'écoule dans un vers, et inline-block est une statue qui se tient dans le rang, mais avec ses propres dimensions.