Avant de déplacer un menu ou d’aligner des colonnes, il faut savoir comment le navigateur range les éléments quand on ne lui dit rien. Deux comportements suffisent à tout expliquer, et un troisième les réconcilie.
Les éléments block prennent toute la largeur de leur parent, et sont suivis d’un retour à la ligne.
Quelques éléments block : html, body, div, p, h1.
En autonomie
1h
<h1>Un titre</h1>
<p>Un paragraphe.</p>
<p>Un autre paragraphe.</p>
Chacun commence sur une nouvelle ligne, et ils s’empilent les uns sous les autres. On parle de flux vertical.
Les éléments block sont redimensionnables : on peut leur donner une largeur et une hauteur.
p {
width: 50%;
background: gold;
}
Le fond doré ne couvre plus que la moitié de la largeur. Pourtant, l’élément suivant ne vient pas se placer à côté : il passe toujours à la ligne. Même s’il ne prend pas toute la largeur de son parent, un élément block la réserve.
On parle d’empreinte dans le flux : la place qu’un élément occupe pour les autres, qui n’est pas forcément celle qu’il occupe à l’écran.
Les éléments inline prennent la largeur de leur contenu, et ne sont pas suivis d’un retour à la ligne.
Quelques éléments inline : span, a, strong, em.
<p>Un texte avec <strong>un mot important</strong> et <a href="/cours/introduction-web/">un lien</a>.</p>
Le strong et le a restent dans la ligne, au milieu du texte. Ils se suivent comme des mots. On parle de flux horizontal.
Les éléments inline ne sont pas redimensionnables : une largeur ou une hauteur données à un span sont tout simplement ignorées. Ils suivent le texte, et le texte décide de leur taille.
Demandez à la classe comment faire une rangée de boutons de même taille, côte à côte.
Il faudrait un élément qui se range sur la ligne comme un inline, mais qui accepte une taille comme un block. C’est pourquoi on a inventé l’inline-block.
.bouton {
display: inline-block;
width: 120px;
}
La propriété display change le comportement d’un élément, quelle que soit sa balise. Un div en display: inline-block se range sur la ligne, un span en display: block passe à la ligne.
| Passe à la ligne | Largeur | Redimensionnable | |
|---|---|---|---|
block |
oui | celle du parent | oui |
inline |
non | celle du contenu | non |
inline-block |
non | celle du contenu | oui |
Un détail qui surprend : deux inline-block séparés par un retour à la ligne dans le code sont séparés par un espace à l’écran. Ce retour à la ligne compte pour un espace, comme entre deux mots.
Dans ce jeu, chaque élément est une boîte de couleur avec la même marge intérieure. Seuls trois réglages comptent : sa couleur, son affichage, block ou inline-block, et sa place dans le code, parmi ses frères ou dans son parent.
Ouvrez Emboîtements et reproduisez chaque dessin. Les premiers niveaux servent à prendre le jeu en main, les derniers demandent de tout combiner.