La propriété CSS display

La propriété display est l'une des propriétés CSS les plus importantes pour contrôler la mise en page. Elle définit le type de boîte de rendu qu'un élément HTML génère — qu'il occupe sa propre ligne, s'intègre dans le flux du texte, devienne un conteneur flex ou grid, ou disparaisse entièrement.

Ce chapitre couvre ce que fait chaque valeur de display, la différence entre l'affichage extérieur (comment la boîte se comporte vis-à-vis de ses frères et sœurs) et l'affichage intérieur (comment ses enfants sont disposés), les erreurs les plus courantes, et des exemples exécutables pour chaque valeur clé.

Pourquoi la propriété display est importante

Chaque élément commence avec une valeur display par défaut fournie par la feuille de style du navigateur — <div> et <p> ont par défaut block, <span> et <a> ont par défaut inline, <li> a par défaut list-item, etc. Avec display, vous pouvez remplacer cette valeur par défaut. Par exemple, un élément de niveau bloc peut être mis en ligne en définissant display: inline, et une liste de liens peut être transformée en barre de navigation horizontale.

Deux remarques supplémentaires sur les valeurs par défaut :

• En HTML, le display initial d'un élément provient de la spécification HTML ou de la feuille de style du navigateur/utilisateur — et non de la valeur par défaut display: inline que vous voyez dans la spécification CSS.
• En XML (qui n'a pas de style intégré), chaque élément a réellement inline comme valeur par défaut.

CSS ancien vs. CSS moderne : dans les anciennes spécifications, width et height n'avaient aucun effet sur les éléments inline. Cette remarque apparaît encore dans de nombreux tutoriels, mais en pratique les navigateurs ignorent width/height sur une boîte inline simple. Pour dimensionner un élément tout en le gardant sur la ligne, utilisez inline-block.

Les types de boîtes en CSS

Il existe plusieurs formats de boîtes principaux en CSS :

• Inline — Les boîtes de niveau inline s'intègrent dans une ligne de texte et ne forcent pas de retour à la ligne. <span>, <em> et <img> sont inline par défaut. Une boîte inline accepte le rembourrage et les marges, mais les marges/rembourrages verticaux ne séparent pas les lignes voisines, et width/height sont ignorés. Pour dimensionner la boîte tout en la gardant sur la ligne, utilisez inline-block. (Voir éléments bloc et inline.)
• Inline-block — Se comporte comme une boîte inline (elle se place sur la ligne à côté du texte et d'autres contenus inline), mais elle respecte bien width, height et les marges/rembourrages verticaux. C'est la valeur à utiliser quand vous souhaitez un dimensionnement de type boîte sans passer à une nouvelle ligne.
• Block — Les boîtes de niveau bloc commencent sur une nouvelle ligne et, par défaut, s'étendent pour remplir la largeur disponible de leur conteneur. Elles peuvent contenir d'autres boîtes de niveau bloc. <p>, <ul>, <h1>-<h6>, <div>, <section> et <ol> sont de niveau bloc par défaut.
• Flex — display: flex génère un conteneur flex de niveau bloc et dispose ses enfants directs le long d'un seul axe. Voir Le guide ultime de Flexbox.
• Grid — display: grid génère un conteneur grid de niveau bloc et dispose ses enfants en deux dimensions (lignes et colonnes). Voir la propriété grid.
• Valeurs de tableau — Des valeurs telles que table, table-row et table-cell font se comporter des éléments non-tableau comme les éléments de tableau HTML correspondants. inline-table se comporte comme un <table> mais en tant que boîte inline ; à l'intérieur de la boîte tableau, un contexte de niveau bloc est établi.

Affichage extérieur vs. intérieur : le CSS moderne décrit display en deux parties. La valeur extérieure (block ou inline) contrôle comment la boîte participe à la mise en page de son parent ; la valeur intérieure (flow, flex, grid, table) contrôle comment la boîte dispose ses propres enfants. C'est pourquoi flex rend un élément à la fois une boîte de niveau bloc et un conteneur flex.

Syntaxe

Syntaxe de la propriété CSS display

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Exemple de la propriété display :

Exemple de la propriété CSS display avec la valeur inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Résultat

Lorsque display: inline est appliqué aux éléments de liste, ils ne commencent plus chacun sur une nouvelle ligne — ils se placent côte à côte, séparés uniquement par le margin-right que vous avez défini.

Exemple de la propriété display avec les valeurs « inline » et « block » :

Exemple de la propriété CSS display avec les valeurs inline et block

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>

La première paire de <span> reste sur une ligne car inline ignore width et height. Les <span> avec .block, en revanche, occupent chacun une ligne complète et respectent la largeur de 300px et la hauteur de 30px.

Exemple de la propriété display avec la valeur « block » :

Exemple de la propriété CSS display avec la valeur block

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Exemple de la propriété display avec la valeur « contents » :

Exemple de la propriété CSS display avec la valeur contents

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Avec display: contents, le conteneur .contents ne génère aucune boîte propre — sa bordure et son arrière-plan seraient ignorés, et ses enfants (le texte et la boîte .hello) se comportent comme s'ils étaient des enfants directs de <body>.

Exemple de la propriété display avec la valeur « flex » :

Exemple de la propriété CSS display avec la valeur flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Valeurs

display: none vs. visibility: hidden

Un point de confusion fréquent : display: none supprime complètement l'élément du flux du document — il n'occupe aucun espace, comme s'il avait été supprimé. visibility: hidden masque l'élément mais conserve sa boîte, de sorte qu'il réserve toujours l'espace qu'il aurait occupé. Utilisez display: none pour réduire la mise en page, et visibility: hidden pour masquer tout en préservant l'espace de mise en page.

Propriétés associées

• Le guide ultime de Flexbox — tout ce que display: flex permet.
• grid — créer des mises en page en deux dimensions avec display: grid.
• visibility — masquer des éléments sans les retirer du flux.
• position et float — d'autres façons de contrôler le placement des boîtes.
• Éléments bloc et inline — les valeurs par défaut HTML que display peut remplacer.

Pratique