Docs CSS exécutables : Display CSS

Q: Quelle est la différence entre block, inline et inline-block ?

Un élément block commence sur une nouvelle ligne et remplit la largeur disponible. Un élément inline s'insère dans le texte et ignore width, height et les marges verticales. inline-block s'insère dans le texte comme inline, mais accepte largeur, hauteur, padding et marges comme un bloc.

Q: Quelle est la différence entre display: none et visibility: hidden ?

display: none retire l'élément et sa place. visibility: hidden le rend invisible mais garde sa place dans la mise en page, donc rien ne bouge.

Q: Une div est-elle block ou inline par défaut ?

Block. div, p, les titres, ul, section et form sont block par défaut ; span, a, strong, em, img, input et button sont inline ou inline-block.

Ce que fait display

Chaque élément a une valeur display qui décide comment il est mis en page. Les trois que l'on rencontre d'abord sont block, inline et inline-block. Voici trois boîtes identiques, avec les mêmes width, height, padding et margin ; seul display change :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Commence sur une nouvelle ligne	Oui	Non	Non
Largeur par défaut	Remplit le conteneur	S'adapte au contenu	S'adapte au contenu
`width` et `height`	S'appliquent	Ignorées	S'appliquent
Margin verticale	S'applique	Ignorée	S'applique
Padding vertical	Repousse le contenu	Peint, mais n'écarte pas les lignes	Repousse le contenu
Éléments typiques	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (les éléments remplacés se comportent ainsi)

Dans l'aperçu, la boîte block est seule sur sa ligne avec 120px de large. La boîte inline ignore la largeur et la hauteur et n'entoure que son mot, et son padding et sa bordure verticaux dépassent au-dessus et en dessous de la ligne sans la rendre plus haute. La boîte inline-block reste dans la ligne de texte mais garde toute sa taille.

display: block

Un élément block prend toute la largeur disponible et renvoie ce qui suit sur une nouvelle ligne. Transformer un lien en block permet de rendre toute une ligne cliquable :

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

La largeur d'un bloc peut être définie, et margin: 0 auto le centre dès qu'il en a une, comme le montre la page pour centrer une div.

display: inline-block

inline-block est l'entre-deux : il s'insère dans une ligne comme un mot, mais vous pouvez le dimensionner. C'est utile pour les badges, les boutons et les icônes dans le texte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Plusieurs boîtes inline-block à la suite reçoivent un petit espace entre elles, dû aux espaces du HTML. Pour des rangées de boîtes, display: flex sur le parent est le meilleur outil.

display: none ou visibility: hidden

Les deux rendent un élément invisible. La différence est de savoir s'il garde sa place :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Prend de la place	Non	Oui	Oui
Peut être cliqué	Non	Non	Oui
Lu par les lecteurs d'écran	Non	Non	Oui
Peut être animé en douceur	Non	Non	Oui

L'attribut HTML hidden fait la même chose que display: none via la feuille de style du navigateur : toute règle CSS qui définit display sur l'élément (par exemple .card { display: flex; }) l'écrase, et l'élément réapparaît. Ajoutez [hidden] { display: none !important; } si cela vous pose problème.

Pour masquer quelque chose visuellement tout en le gardant pour les lecteurs d'écran (le libellé d'un bouton icône, par exemple), utilisez une classe « visually hidden » plutôt que display: none.

display: flex et display: grid

Ces deux valeurs transforment un élément en conteneur de mise en page pour ses enfants :

display: flex dispose les enfants sur une ligne ou une colonne, avec un contrôle de l'alignement et de l'espacement. Voir flexbox.
display: grid place les enfants sur des lignes et des colonnes en même temps.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Le conteneur lui-même reste un bloc. inline-flex et inline-grid font la même chose pour les enfants, mais le conteneur s'insère dans la ligne, comme inline-block.

Les autres valeurs

Valeur	Rôle
`flow-root`	Un bloc qui contient ses flottants et empêche les marges des enfants de s'échapper ; le « clearfix » moderne
`contents`	La boîte de l'élément disparaît et ses enfants se comportent comme des enfants de son parent. À éviter sur les boutons, les listes et les tableaux : certains navigateurs font perdre aux lecteurs d'écran le sens de l'élément
`list-item`	Un bloc avec une puce de liste, la valeur par défaut de `li`
`table`, `table-row`, `table-cell`	Une mise en page de tableau sur des éléments qui ne sont pas des tableaux
`inline-flex`, `inline-grid`	Un conteneur flex ou grid placé en ligne

Erreurs courantes

Définir width ou height sur un span ou un a. Les éléments inline les ignorent. Utilisez inline-block ou block.
Une margin verticale sur un élément inline. Également ignorée. Même solution.
Utiliser display: none pour masquer un texte destiné aux lecteurs d'écran. Il leur est caché aussi.
S'attendre à ce qu'un enfant s'affiche dans un parent en display: none. Rien ne s'affiche dans un parent caché.
Une règle display qui écrase l'attribut hidden. La règle CSS gagne.
Essayer d'animer display. display: none cache l'élément immédiatement, sans fondu ; animez opacity et changez display (ou visibility) à la fin.

Questions fréquentes

Quelle est la différence entre block, inline et inline-block ?

Un élément block commence sur une nouvelle ligne et remplit la largeur disponible. Un élément inline s'insère dans le texte et ignore width, height et les marges verticales. inline-block s'insère dans le texte comme inline, mais accepte largeur, hauteur, padding et marges comme un bloc.

Que fait display: none ?

Il retire complètement l'élément de la page : il ne prend aucune place, n'est pas affiché et reste caché aux lecteurs d'écran. Ses enfants sont cachés avec lui et ne peuvent pas être affichés avec leur propre valeur de display.

Quelle est la différence entre display: none et visibility: hidden ?

display: none retire l'élément et sa place. visibility: hidden le rend invisible mais garde sa place dans la mise en page, donc rien ne bouge.

Une div est-elle block ou inline par défaut ?

Block. div, p, les titres, ul, section et form sont block par défaut ; span, a, strong, em, img, input et button sont inline ou inline-block.

Pourquoi y a-t-il un espace entre les éléments inline-block ?

Les espaces entre les balises dans le HTML sont affichés comme un espace, exactement comme entre des mots. Utilisez plutôt display: flex avec gap sur le parent, ou supprimez ces espaces.

Concepts liés