W3Docs

Apparence

Français

Propriété CSS display ​

La propriété display définit le type de boîte utilisé pour un élément HTML.

Avec la propriété display, nous pouvons remplacer la valeur initiale d’un élément. Par exemple, un élément de niveau bloc peut être affiché comme un élément en ligne en spécifiant la valeur "inline". Dans les anciennes spécifications CSS, un élément en ligne n’acceptait pas les propriétés height et width pour modifier ses dimensions ou la hauteur de sa boîte de ligne. Cependant, le CSS moderne prend entièrement en charge ces propriétés sur les éléments en ligne, et elles influencent bien la mise en page.

En HTML, les valeurs par défaut de la propriété display sont tirées des comportements décrits dans les spécifications HTML ou de la feuille de style par défaut du navigateur ou de l’utilisateur. En revanche, la valeur par défaut en XML est "inline".

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

  • Inline
    Les éléments inline, ou éléments de niveau inline, sont des boîtes qui s’écoulent sur une ligne sans la rompre. Les éléments <span>, <em> et <img> font partie d’une boîte de ligne, mais ne peuvent pas provoquer de retour à la ligne. Les éléments inline peuvent avoir du padding et des marges, mais définir width et height ne modifiera pas leurs dimensions ni la hauteur de la boîte de ligne dans les anciennes spécifications CSS. Le CSS moderne prend entièrement en charge ces propriétés sur les éléments inline, et elles influencent bien la mise en page. Définir du padding et des marges sur l’élément poussera les autres éléments de la ligne uniquement horizontalement. Cependant, un élément de niveau inline peut accepter width et height s’il est défini comme un élément inline-block à l’aide de la propriété display.
  • Inline-block
    Les éléments inline-block sont identiques aux éléments inline, sauf qu’ils acceptent width et height. La largeur et la hauteur repoussent les éléments de la ligne à la fois horizontalement et verticalement.
  • Block
    Les boîtes block, ou éléments de niveau bloc, ne se trouvent pas dans une boîte de ligne, mais la dépassent en passant à la ligne. Par défaut, elles occupent autant d’espace horizontal que possible. Les éléments de niveau bloc peuvent contenir d’autres éléments de niveau bloc. Les éléments <p>, <ul>, <h1>-<h6>, <div>, <section> et <ol> sont des exemples d’éléments de niveau bloc.
  • Flex
    La propriété display est également utilisée pour Flexbox. La valeur flex génère une boîte de niveau bloc pour l’élément et dispose le contenu selon le modèle Flexbox. Ici, vous pouvez lire Le guide ultime de Flexbox.
  • Grid
    La propriété display définit initialement la mise en page Grid. Elle génère une boîte de niveau bloc pour l’élément en disposant le contenu selon le modèle Grid.
  • Table Values
    Les valeurs de display vous permettent de faire en sorte que des éléments non-table se comportent comme des éléments de table. Chaque valeur de table force l’élément à se comporter comme l’élément de table correspondant en HTML. La valeur inline-table se comporte comme un élément HTML <table>, mais sous forme de boîte en ligne. Il existe un contexte de niveau bloc à l’intérieur de la boîte de table.
Initial Value-
Applies toAll elements.
InheritedNo
AnimatableNo
VersionCSS1
DOM Syntaxobject.style.display = "list-item";

Syntaxe ​

Syntaxe de la propriété CSS display

css
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

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de propriété display</h2>
    <p>Ici, l’élément de liste a sa valeur initiale :</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Ici, l’élément de liste est utilisé avec la propriété display. La valeur "inline" est utilisée :</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>
Try it Yourself »

Résultat ​

CSS display Property

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

html
<!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>Exemple de propriété display</h2>
    <p>Ici, l’élément de liste a la valeur "initial". Nous voyons que la valeur "inline" n’accepte pas height et width :</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Ici, l’élément de liste est utilisé avec la valeur "block" de la propriété display :</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>
Try it Yourself »

Exemple de la propriété display avec la valeur "block" : ​

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

html
<!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>Exemple de propriété display</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>
Try it Yourself »

Exemple de la propriété display avec la valeur "contents" : ​

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

html
<!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>Exemple de propriété display</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>
Try it Yourself »

Exemple de la propriété display avec la valeur "flex" : ​

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

html
<!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>Exemple de propriété display</h2>
    <p>Ici, "display: flex;" est utilisé :</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>
Try it Yourself »

Valeurs ​

ValueDescriptionPlay it
inlineReprésente un élément comme un élément en ligne.Play it »
blockReprésente un élément comme un élément de bloc.Play it »
contentsL’élément lui-même ne génère aucune boîte, et ses enfants sont disposés comme s’ils étaient des enfants directs du parent de l’élément.Play it »
flexReprésente un élément comme un conteneur flex de niveau bloc.Play it »
gridReprésente un élément comme un conteneur grid de niveau bloc.Play it »
inline-blockReprésente un élément comme un conteneur bloc de niveau inline.Play it »
inline-flexReprésente un élément comme un conteneur flex de niveau inline.Play it »
inline-gridReprésente un élément comme un conteneur grid de niveau inline.Play it »
inline-tableReprésente un élément comme un tableau de niveau inline. Il se comporte comme un élément HTML <table>, mais sous forme de boîte en ligne, et non de boîte de niveau bloc. À l’intérieur de la boîte de table se trouve un contexte de niveau bloc.Play it »
list-itemL’élément se comporte comme un élément HTML <li>.Play it »
run-inReprésente un élément comme bloc ou en ligne selon le contexte.Play it »
tableL’élément se comporte comme un élément HTML <table>.Play it »
table-captionL’élément se comporte comme un élément HTML <caption>.Play it »
table-column-groupL’élément se comporte comme un élément HTML <colgroup>.Play it »
table-header-groupL’élément se comporte comme un élément HTML <thead>.Play it »
table-footer-groupL’élément se comporte comme un élément HTML <tfoot>.Play it »
table-row-groupL’élément se comporte comme un élément HTML <tbody>.Play it »
table-cellL’élément se comporte comme un élément HTML <td>.Play it »
table-columnL’élément se comporte comme un élément HTML <col>.Play it »
table-rowL’élément se comporte comme un élément HTML <tr>.Play it »
noneSignifie que l’élément ne sera pas affiché du tout.Play it »
initialFait utiliser à la propriété sa valeur par défaut.Play it »
inheritHérite la propriété de son élément parent.

Practice ​

Quelles sont les différentes valeurs de la propriété CSS display mentionnées dans l’URL fournie ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.