Chargement...

Display en CSS

display répond à une question calme : comment cette boîte rejoint-elle la page ? Certaines s’empilent en blocs pleine largeur ; d’autres s’asseyent dans une phrase ; certaines peuvent être retirées entièrement de la mise en page. Cette leçon cartographie les valeurs du quotidien — et laisse la pratique profonde de inline-block pour la session suivante.

Une boîte à outils display

📊 Display en un coup d’œil

Valeur Rôle au quotidien
block Commence sur sa propre ligne ; remplit souvent la largeur de rangée
inline Vit dans la ligne de texte ; width/height sont souvent ignorés
inline-block S’assoit dans une ligne comme du texte, mais accepte width/height/padding comme une boîte
none Retire l’élément de la mise en page (l’espace s’effondre)
flex / grid Modes de mise en page puissants — leçons plus tard, pas ici

Le HTML par défaut choisit déjà un display pour beaucoup de balises (div est block, span est inline, button souvent quasi inline-block). CSS permet de le remplacer quand le flux demande un autre travail.

Block — sa ligne, boîte spacieuse

Les boîtes block commencent sur une nouvelle ligne et prennent typiquement la largeur disponible. Titres, paragraphes et div se comportent ainsi par défaut.

Forcer block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — dans la phrase

Les boîtes inline s’asseyent dans le flux du texte et se coupent avec les mots. Mettre width ou height sur un inline pur ne sert souvent à rien — d’où le recours à block ou inline-block.

Forcer inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — un aperçu court

inline-block garde les voisins sur une ligne s’il y a de la place, tout en respectant width, height et padding. Vous l’entraînerez soigneusement dans la leçon suivante ; ici, reconnaissez seulement l’hybride.

Aperçu inline-block

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — quitter la mise en page

display: none cache l’élément et effondre son espace. La mise en page et beaucoup d’aides le traitent comme absent. Préférez un bascule de classe à des règles dispersées.

Cacher avec none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden est une autre histoire — la boîte peut encore réserver de l’espace. Cette leçon reste avec display: none pour un retrait réel de la mise en page. Nous n’approfondissons pas visibility ici.

Une habitude calme pour display

Changez display pour des raisons de flux — pas pour la cosmétique des boutons (leçon précédente) ni comme raccourci de tout problème de mise en page (flex/grid plus tard). Nommez les états intentionnels avec des classes.

Classes afficher et cacher

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Comparer trois modes

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

À vous de jouer

  1. Forcez un span en display: block et donnez-lui width + padding.
  2. Forcez un court div (ou titre) en display: inline et regardez-le dans une phrase.
  3. Ajoutez un .chip en inline-block — remarquez que width/padding fonctionnent.
  4. Cachez un panneau avec .is-hidden { display: none; } et basculez la classe.
  5. Écrivez une phrase : quand block, quand inline pour un libellé ?

Erreurs fréquentes

  • S’attendre à ce que width / height marchent sur un inline pur
  • Utiliser display: none quand on voulait seulement atténuer l’apparence — et oublier que l’espace s’effondre
  • Traiter cette leçon comme des peaux hover de bouton (c’était Buttons)
  • Déverser des recettes Flexbox/Grid ici au lieu d’apprendre les quatre valeurs de base
  • Confondre « caché de la mise en page » avec la leçon plus profonde inline-block suivante

Résumé

  • display contrôle comment une boîte rejoint le flux de page
  • block prend sa propre ligne ; inline vit dans le texte
  • inline-block est l’hybride — pratique ensuite
  • none retire l’élément et son espace de la mise en page
  • Changez display pour des jobs de flux ; laissez les mises en page avancées pour plus tard

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 35 de 35
Css Tutoriel