Module 2La mise en page
Chapitre 7 sur 15
display et le flux normal
Le flux normal, les valeurs de display, float et le texte en colonnes.
- ≈ 135 min
- 5 leçons
- 3 vidéos
- 3 exercices
Module 2La mise en page
Chapitre 7 sur 15
Le flux normal, les valeurs de display, float et le texte en colonnes.
Objectifs
Avec ce chapitre, tu sauras…
display : block, inline, inline-block, none ;display: none et visibility: hidden ;float et clear, et savoir pourquoi on ne les utilise plus pour la mise en page ;columns.Sans CSS de mise en page, le navigateur place les éléments selon des règles simples : c'est le flux normal. Avant d'apprendre à le modifier avec Flexbox et Grid, il faut le comprendre, et connaître la propriété qui décide du comportement de chaque boîte : display.
Leçon 1
Tu as vu cette différence dans la formation HTML (chapitre 7). En CSS, elle est contrôlée par la propriété display.
Leçon 2
Tableau: Les quatre valeurs de base
| Valeur | Nouvelle ligne ? | Accepte width / height ? | Marges verticales ? | Exemples par défaut |
|---|---|---|---|---|
block | oui | oui | oui | div, p, h1, li |
inline | non | non | non (seulement horizontales) | span, a, strong |
inline-block | non | oui | oui | img, button, input |
none | — | l'élément disparaît | — | head, script |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 3
| Propriété | L'élément est-il visible ? | Occupe-t-il sa place ? | Lu par les lecteurs d'écran ? |
|---|---|---|---|
display: none | non | non, les autres prennent sa place | non |
visibility: hidden | non | oui, un trou reste | non |
opacity: 0 | non |
Leçon 4
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 5
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
1Quel type d'élément accepte width mais reste dans la ligne ?
2Sur un élément inline, margin-top…
3display: none…
4Pour laisser un « trou » à la place d'un élément caché :
5Aujourd'hui, float sert surtout à…
6clear: both sert à…
L'essentiel du chapitre
display : block, inline (ignore width/height et marges verticales), inline-block (les accepte), none.display: none libère la place ; visibility: hidden la garde ; opacity: 0 reste cliquable.float + clear : uniquement pour enrouler du texte autour d'une image. La mise en page, c'est Flexbox et Grid.columns pour du texte en colonnes.| oui, et reste cliquable |
Et les valeurs de mise en page, que tu verras en détail : display: flex (chapitre 9) et display: grid (chapitre 10).
.menu a {
display: inline-block; /* reste dans la ligne, mais accepte padding et dimensions */
padding: 0.5rem 1rem;
background-color: #2f5bc4;
color: white;
text-decoration: none;
border-radius: 6px;
}<div style="font-family:Inter,sans-serif;font-size:9pt">
<span style="display:inline-block;padding:5px 10px;background:#2f5bc4;color:#fff;border-radius:5px;margin-right:4px">Accueil</span><span style="display:inline-block;padding:5px 10px;background:#2f5bc4;color:#fff;border-radius:5px;margin-right:4px">Projets</span><span style="display:inline-block;padding:5px 10px;background:#2f5bc4;color:#fff;border-radius:5px">Contact</span>
</div>Sur un élément inline comme <a>, padding-top et padding-bottom sont dessinés mais ne repoussent pas les lignes voisines : le fond déborde sur le texte au-dessus. Et width ou margin-top sont ignorés. Solution : display: inline-block (ou block).
Le chapitre « Display » de Dave Gray (anglais) : les valeurs de display et leurs effets.
Tableau: Trois façons de cacher
float sort un élément du flux et le place à gauche ou à droite : le texte qui suit s'enroule autour, comme une photo dans un magazine.
.article img {
float: left;
width: 200px;
margin: 0 1rem 1rem 0;
}
.article h2 {
clear: both; /* le titre suivant repasse sous l'image */
}Pendant quinze ans, on a construit des mises en page entières avec float (colonnes, grilles), au prix de nombreuses astuces (clearfix). Aujourd'hui, on ne l'utilise plus que pour son usage d'origine : faire s'enrouler du texte autour d'une image. Pour placer des blocs côte à côte, on utilise Flexbox ou Grid. Tu croiseras encore float dans du code ancien : sache le lire.
Le chapitre « Floats » de Dave Gray (anglais) : utile pour comprendre le code ancien que tu rencontreras en entreprise.
.journal {
columns: 3 220px; /* 3 colonnes maximum, de 220px minimum */
column-gap: 2rem;
column-rule: 1px solid #dde3ee;
}
.journal h2 {
column-span: all; /* le titre traverse toutes les colonnes */
}<div style="font-family:Georgia,serif;font-size:7.5pt;columns:3;column-gap:14px;column-rule:1px solid #dde3ee;text-align:justify;line-height:1.4">La propriété columns répartit automatiquement le texte sur plusieurs colonnes, comme dans un journal. Le navigateur calcule lui-même où couper chaque colonne pour qu'elles aient à peu près la même hauteur. Si l'écran est trop étroit pour trois colonnes de la largeur minimale demandée, il en affiche deux, puis une seule : la mise en page s'adapte sans media query. C'est idéal pour les longues listes de liens dans un pied de page, ou pour un texte court et dense. Pour un article long, on préfère une seule colonne, plus confortable à lire à l'écran.</div>Le chapitre « Columns » de Dave Gray (anglais) : le module multi-colonnes en détail.
Crée un article avec un titre, une photo de 250px de large à droite autour de laquelle s'enroule le texte (au moins trois paragraphes), puis un sous-titre qui commence obligatoirement sous la photo.
Pour chaque cas, décris l'affichage de trois <span> contenant « A », « B », « C », avec span { width: 100px; background: #cde; } : (a) sans autre règle ; (b) avec display: block ; (c) avec display: inline-block.
Une liste <ul class="tags"> contient des <li> (HTML, CSS, Figma, Git). Affiche-les côte à côte comme des étiquettes : pas de puces, fond bleu clair, texte bleu foncé, padding de 0.25em 0.75em, coins arrondis, une petite marge entre elles. Utilise display: inline-block.
Un texte utile aux lecteurs d'écran mais inutile visuellement (par exemple « Ouvrir le menu » sur un bouton-icône) se cache avec une classe utilitaire classique, souvent nommée .sr-only (screen reader only), qui réduit l'élément à 1 pixel au lieu de le supprimer. Tu la trouveras dans tous les frameworks CSS.