Propriété CSS display

❮ Précédent Suivant ❯

La propriété display définit le type de la boîte, qui est utilisée pour un élément HTML. La valeur initiale de cette propriété est "inline". Un élément inline n'acceptera les propriétés height et width. Il va juste les ignorer.

Avec la propriété display on peut passer outre à la valeur initiale d'un élément. Par exemple, un élément du niveau bloc peut être affiché en tant qu'un élément inline en spécifiant une valeur de "inline".

En HTML, les valeurs initiales de la propriété display sont prises des comportements qui sont décrits dans les spécifications HTML ou du navigateur ou de la feuille de style initiale d'utilisateur. D'autre côté, la valeur initiale en XML est "inline".

Valeur initiale	inline
Appliquée à	Tous les éléments.
Héritée	Non
Animable	Non
Version	CSS1
Syntaxe DOM	object.style.display = "list-item";

Syntaxe

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

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>                    
      .display li{   	
      display: inline;
      margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété display</h2>
    <p>Ici l'élément de la liste est avec sa valeur initiale:</p>
    <ul>
      <li>Élément de liste</li>
      <li>Élément de liste</li>
    </ul>
    <p>Ici l'élément de la liste est utilisé avec la propriété display. La valeur "inline" est utilisée:</p>
    <ul class="display">
      <li>Élément de liste 1</li>
      <li>Élément de liste 2</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où l'élément est affiché en tant qu'un élément bloc. La valeur "inline" n'accepte pas height et width:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>  
      .inline {
      border: 1px solid #1c87c9;  
      display: inline; 	
      height: 30px;
      width: 300px;
      }                  
      .block {
      border: 1px solid #1c87c9;   	
      display: block;
      height: 30px;
      width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété display</h2>
    <p>Ici l'élément de la liste est avec la valeur "initial". Nous voyons que la valeur "inline" n'accepte pas height et width:</p>
    <span> Quelque texte.</span>
    <span class="inline"> Un autre texte.</span>
    <hr>
    <p>Ici l'élément de la liste est utilisé avec la valeur  "block" de la propriété display:</p>
    <span class="block"> Quelque texte.</span>
    <span class="block"> Un autre texte.</span>              
  </body>
</html>

Essayez-vous-même!

Voyez un autre exemple avec la valeur "block":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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 la propriété display</h2>
    <div class="block">
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères.  
      <div class="hello">BONJOUR!</div>
      Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique. 
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple avec la valeur "contents":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .contents {
      display: contents;
      border: 1px solid #666;
      background-color: #eee;
      padding: 10px;
      width: 200px;
      }
      .hello {
      border: 1px solid #1c87c9;
      background-color: #ccc;
      padding: 10px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété display</h2>
    <div class="contents">
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères.
      <div class="hello">BONJOUR!</div>
      Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique. 
    </div>
  </body>
</html>

Essayez-vous-même!

Voici in exemple avec la valeur "flex" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      #flex {
      width: 300px;
      height: 100px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      div {
      width: 70px;
      height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la 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>

Essayez-vous-même!

Valeurs

Valeur	Description
inline	Affiche un élément en tant qu'un élément en ligne. C'est la valeur initiale de cette propriété.
block	Affiche un élément en tant qu'un élément bloc.
contents	Fait le conteneur disparaître, en faisant les éléments enfants l'enfant de l'élément au prochain niveau dans DOM.
flex	Affiche un élément en tant qu'un conteneur de niveau bloc flex.
grid	Affiche un élément en tant qu'un conteneur de niveau bloc grid.
inline-block	Affiche un élément en tant qu'un conteneur de niveau en ligne bloc.
inline-flex	Affiche un élément en tant qu'un conteneur de niveau en ligne flex.
inline-grid	Affiche un élément en tant qu'un conteneur de niveau en ligne grid.
inline-table	Affiche un élément en tant qu'un tableau de niveau en ligne. Cela se comporte comme un élément HTML <table>, mais comme une boîte en ligne, et pas comme une boîte de niveau bloc. Dans le tableau, la boîte est un contecte de niveau bloc.
list-item	Fait l'élément se comporter comme un élément HTML <li>.
run-in	Affiche un élément comme bloc ou en ligne par rapport au contexte.
table	Fait l'élément se comporter comme un élément HTML <table>.
table-caption	Fait l'élément se comporter comme un élément HTML <caption>.
table-column-group	Fait l'élément se comporter comme un élément HTML <colgroup>.
table-header-group	Fait l'élément se comporter comme un élément HTML <thead>.
table-footer-group	Fait l'élément se comporter comme un élément HTML <tfoot>.
table-row-group	Fait l'élément se comporter comme un élément HTML <tbody>.
table-cell	Fait l'élément se comporter comme un élément HTML <td>.
table-column	Fait l'élément se comporter comme un élément HTML <col>.
table-row	Fait l'élément se comporter comme un élément HTML <tr> element.
none	Cela signifie que l'élément ne sera jamais affiché.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.