Propriété CSS display

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>

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>

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>

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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées