Historique des conversations
Chargement...
Chapitre 6 : Les types d’affichage (display)
1. Qu’est-ce que la propriété display ?
La propriété display en CSS détermine la façon dont un élément HTML est affiché dans la page.
Elle influence la manière dont il occupe l’espace et interagit avec les autres éléments.
2. Les types d'affichage les plus utilisés
block: occupe toute la largeur disponible. Exemples :div,p,sectioninline: occupe uniquement la largeur de son contenu. Exemples :span,ainline-block: se comporte commeinlinemais acceptewidth,heightnone: l’élément est masqué (invisible et non présent dans le flux)
3. Exemple pratique
<style>
.box1 {
display: block;
background: lightblue;
}
.box2 {
display: inline;
background: lightgreen;
}
.box3 {
display: inline-block;
width: 150px;
height: 50px;
background: lightcoral;
}
</style>
<div class="box1">Block</div>
<div class="box2">Inline</div>
<div class="box3">Inline-block</div>4. Comparatif rapide
| Type | Prend toute la largeur ? | Peut avoir width / height ? |
|---|---|---|
block |
✅ | ✅ |
inline |
❌ | ❌ |
inline-block |
❌ | ✅ |
5. Autres valeurs utiles (à venir plus tard)
Il existe d'autres types avancés comme flex, grid, inline-flex, etc.
Ceux-ci seront abordés dans les chapitres dédiés à la mise en page moderne.
Conclusion
Comprendre les types d’affichage est fondamental pour construire une mise en page propre.
Dans le prochain chapitre, nous explorerons le positionnement des éléments avec les propriétés position, top, left…
Évaluation des acquis
Correction immédiate
Quiz du chapitre 6
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Passage en Bloc
Atelier #1Transforme une balise <span> (normalement inline) en un élément de type block.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
span {
display: block;
}
#2 — Inline-Block
Atelier #2Permets à des balises <div> d'être côte à côte tout en gardant la possibilité de leur donner une largeur (width).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
div {
display: inline-block;
}
#3 — Masquer un élément
Atelier #3Fais disparaître complètement un élément de la page sans qu'il ne prenne d'espace.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.hidden {
display: none;
}
#4 — Visibilité vs Display
Atelier #4Quelle propriété permet de cacher un élément tout en conservant son espace dans le layout ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.invisible {
visibility: hidden;
}
#5 — Introduction au Flex (Simple)
Atelier #5Active le mode Flexbox sur un conteneur.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.container {
display: flex;
}