Skip to main content

Chapitre 4 : Le flux normal et la propriété display

Compréhension du comportement par défaut des éléments block et inline

Lorsqu'on commence en CSS, on a souvent l'impression que les éléments se placent "au hasard" ou qu'ils refusent d'obéir à certaines instructions de taille. Ce sentiment provient généralement d'une méconnaissance du flux normal (Normal Flow) et de la propriété display.

Le rendu d'une page web n'est pas un canevas libre où l'on place des objets aux coordonnées X et Y (comme dans un logiciel de dessin), mais plutôt un flux continu d'informations que le navigateur interprète et dispose selon des règles strictes.

Le Flux Normal​

1. Quoi​

Le flux normal est le comportement par défaut du navigateur pour positionner les éléments sur une page. On peut l'imaginer comme un courant d'eau qui descend du haut vers le bas de la page.

Dans ce flux, les éléments sont traités selon leur type de rendu. Le navigateur lit le code HTML et place chaque élément les uns après les autres. Si un élément "occupe toute la largeur", le suivant est poussé en dessous. S'il ne prend que la place nécessaire, le suivant se place juste à côté.

2. Pourquoi​

Le flux normal est essentiel car il garantit que le contenu reste lisible et accessible, même si le CSS ne charge pas. C'est ce qui permet à un texte de s'adapter à la largeur de l'écran d'un smartphone sans que les mots ne sortent de la page. Sans flux normal, chaque élément devrait être positionné manuellement, ce qui rendrait le web totalement rigide et non responsive.

3. Comment​

Le flux normal est géré automatiquement, mais il est influencé par la propriété display. Voici comment le navigateur décide de la place d'un élément :

A. Le comportement par défaut : Chaque balise HTML possède une valeur de display par défaut définie par les spécifications du W3C. Par exemple, une balise <div> est block par défaut (elle occupe toute la largeur et force un retour à la ligne), tandis qu'une balise <span> est inline (elle reste dans le flux du texte et ne prend que la place de son contenu).

B. L'influence du contenu : Le flux normal s'adapte dynamiquement. Si vous ajoutez du texte dans un paragraphe, le paragraphe s'agrandit verticalement, poussant ainsi tous les éléments situés en dessous plus bas dans la page.

C. Limitations : Le flux normal est "linéaire". Pour créer des colonnes complexes, des superpositions ou des grilles, on doit sortir du flux normal (via le positionnement absolute, fixed ou les modules Flexbox et Grid), mais comprendre le flux normal est le prérequis indispensable avant d'aborder ces concepts.

4. Zone de Danger​

❌ Erreur commune : Essayer de forcer un élément à se placer à côté d'un autre en utilisant uniquement des marges négatives ou des width très précis.

✅ Bonne pratique : Modifier la propriété display de l'élément pour qu'il s'intègre naturellement dans le flux (par exemple, passer de block à inline-block).

La propriété display : Block vs Inline​

La propriété display est l'un des outils les plus puissants du CSS. Elle définit la "nature" de la boîte de l'élément.

1. Quoi​

Il existe trois valeurs fondamentales pour un débutant :

  • display: block : L'élément se comporte comme un bloc solide. Il commence toujours sur une nouvelle ligne et s'étire pour occuper 100% de la largeur disponible de son parent.
  • display: inline : L'élément se comporte comme un mot dans une phrase. Il ne provoque pas de retour à la ligne et sa largeur/hauteur sont déterminées uniquement par son contenu.
  • display: inline-block : C'est un hybride. L'élément reste sur la même ligne que les autres (comme un élément inline), mais il accepte les propriétés de dimensions width et height (comme un élément block).

2. Pourquoi​

Dans un projet professionnel, on utilise ces distinctions pour structurer l'interface :

  • On utilise le block pour les structures majeures (en-têtes, sections, articles, pieds de page).
  • On utilise l' inline pour styliser des morceaux de texte à l'intérieur d'un paragraphe (liens, gras, surbrillance).
  • On utilise l' inline-block pour créer des composants répétitifs alignés horizontalement, comme des boutons de navigation ou des badges de catégories.

3. Comment​

A. Syntaxe de base​

.element-bloc {
  display: block;
}

.element-ligne {
  display: inline;
}

.element-hybride {
  display: inline-block;
}

B. Cas concret : Création d'une barre de navigation​

Imaginons que nous voulons transformer une liste non ordonnée <ul> (qui est composée d'éléments <li> de type block) en un menu horizontal.

<nav class="main-nav">
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
/* On retire les puces de la liste */
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Par défaut, <li> est block (un par ligne). 
   On le passe en inline-block pour les aligner horizontalement 
   tout en pouvant ajouter une marge et des dimensions. */
.main-nav li {
  display: inline-block;
  margin-right: 1.2rem;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  padding: 0.6rem 1.2rem;
  background-color: #f0f0f0;
  border-radius: 5px;
  /* <a> est inline par défaut. 
     Pour que le padding vertical s'applique correctement 
     et ne chevauche pas les autres lignes, on le passe en inline-block. */
  display: inline-block;
}

C. Limitations et pièges​

L'élément inline a des restrictions majeures qui piègent souvent les juniors :

  1. Dimensions ignorées : Appliquer width: 200px ou height: 100px sur un élément display: inline n'aura aucun effet.
  2. Marges verticales : Les propriétés margin-top et margin-bottom ne poussent pas les éléments voisins pour un élément inline. Seules les marges horizontales fonctionnent.
  3. Padding vertical : Le padding vertical s'affiche visuellement, mais il ne "pousse" pas le contenu environnant, ce qui peut créer des chevauchements disgracieux.

4. Zone de Danger​

❌ Erreur commune : Utiliser un <span> pour créer un bouton et s'étonner que la largeur (width) ne fonctionne pas.

✅ Bonne pratique : Utiliser un <button> (qui est inline-block par défaut) ou ajouter display: inline-block à votre <span>.

Logique de la propriété display​

Le cas particulier de display: none​

1. Quoi​

La valeur display: none retire complètement l'élément du flux normal. L'élément n'est pas seulement invisible : il est supprimé de la mise en page.

2. Pourquoi​

C'est l'outil principal pour créer des éléments interactifs :

  • Menus mobiles (hamburger) qui s'affichent au clic.
  • Onglets de navigation où seul le contenu de l'onglet actif est visible.
  • Modales de confirmation.

3. Comment​

.hidden-element {
  display: none;
}

Lorsqu'un élément est en display: none, le navigateur agit comme si cet élément n'existait pas dans le HTML. Les éléments suivants remontent pour combler le vide.

4. Zone de Danger​

❌ Confusion critique : Confondre display: none et visibility: hidden.

  • display: none : L'élément disparaît et ne prend plus de place.
  • visibility: hidden : L'élément devient invisible, mais garde son espace vide dans la page.

Questions clés​

1. Quelle est la différence fondamentale entre un élément block et un élément inline ?

Découvrir la réponse

Un élément block commence toujours sur une nouvelle ligne et occupe toute la largeur disponible. Un élément inline reste sur la même ligne que le contenu environnant et ne prend que la largeur nécessaire à son contenu.

2. Pourquoi mon width ne fonctionne-t-il pas sur ma balise <a> ?

Découvrir la réponse

Parce que la balise <a> est de type inline par défaut. Les dimensions de largeur et hauteur sont ignorées pour les éléments inline. Pour corriger cela, il faut utiliser display: block ou display: inline-block.

3. Quand devrais-je utiliser inline-block plutôt que block ?

Découvrir la réponse

Utilisez inline-block lorsque vous voulez que vos éléments soient alignés horizontalement (comme des boutons ou des cartes de produits) tout en gardant la possibilité de contrôler leur largeur, leur hauteur et leurs marges verticales.

4. Que se passe-t-il pour le reste de la page quand on applique display: none à un élément ?

Découvrir la réponse

L'élément est totalement retiré du flux. Les éléments qui se trouvaient après lui remontent pour occuper l'espace libéré, comme si l'élément avait été supprimé du code HTML.

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Créer une structure simple de page avec un titre, un paragraphe et un pied de page, en s'assurant que chacun occupe bien sa propre ligne.

Consigne :

  1. Créez un fichier HTML avec un <h1>, un <p> et un <footer>.
  2. Appliquez un fond coloré différent à chaque élément.
  3. Vérifiez que même si vous réduisez la largeur du texte, l'élément continue d'occuper toute la largeur de l'écran.
Découvrir la solution commentée

<h1 class="title">Mon Titre</h1>
<p class="content">Ceci est un paragraphe de test pour vérifier le flux block.</p>
<footer class="footer">Pied de page © 2023</footer>
/* CSS */
.title {
  background-color: lightblue;
  /* display: block est appliqué par défaut sur h1 */
}

.content {
  background-color: lightgreen;
  /* display: block est appliqué par défaut sur p */
}

.footer {
  background-color: lightcoral;
  /* display: block est appliqué par défaut sur footer */
}

Exercice 2 : Adaptation​

Objectif : Transformer une liste verticale en une série de "tags" horizontaux.

Consigne :

  1. Créez une liste <ul> contenant 4 éléments <li> (ex: "JavaScript", "CSS", "HTML", "React").
  2. Supprimez les puces de la liste.
  3. Faites en sorte que les éléments de la liste s'alignent horizontalement.
  4. Ajoutez un padding de 0.3rem 0.6rem, une bordure arrondie et une couleur de fond pour que chaque tag ressemble à un petit bouton.
Découvrir la solution commentée

<ul class="tag-list">
  <li>JavaScript</li>
  <li>CSS</li>
  <li>HTML</li>
  <li>React</li>
</ul>
/* CSS */
.tag-list {
  list-style: none;
  padding: 0;
}

.tag-list li {
  /* On change le comportement block par défaut du <li> 
     pour permettre l'alignement horizontal ET le padding */
  display: inline-block;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 0.9rem;
  padding: 0.3rem 0.6rem;
  margin: 0.5rem;
  font-family: sans-serif;
  font-size: 14px;
}