Attribut DISPLAY

Rôle

L’attribut display permet de changer le mode d’affichage dans le flux HTML (disposition par défaut des éléments). Ce changement entraînera un comportement différent de cet élément…

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.display

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 300px;
  margin: 5px;
  display: inline;
}
#gauche{
  background-color: silver;
}
#droite{
  background-color: pink;
}
h1{
  background-color: orange;
  display: inline;
}

– Le code HTML

<div id="gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Repudiandae, possimus in quod totam mollitia ipsam quia tenetur porro distinctio dignissimos,fugit odio quas ipsa. Omnis iure aliquam maxime incidunt inventore.</div>
<div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Repudiandae, possimus in quod totam mollitia ipsam quia tenetur porro distinctio dignissimos.</div>
<h1>Titre</h1>

Résultat

Comportement normal dans le flux HTML

Comportement modifié : les éléments se comportent comme des balises inlines (display:inline)

Compatibilité

L’attribut display est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 8

Valeurs

Les différentes valeurs de l’attribut display sont:

none

L’élément ne s’affiche pas dans la page (quitte le flux)
Syntaxe :
display : none Survolez la zone grise pour la faire disparaître

block

L’élément ne comporte comme un élément de type block
Syntaxe :
display : block Survolez la zone de texte pour les transformer en blocs

inline

L’élément ne comporte comme un élément de type inline
Syntaxe :
display : inline Survolez les blocs pour les transformer en éléments inline

inline-block

L’élément ne comporte comme un élément de type inline (dans le sens qu’il est disposé en ligne) mais aussi comme un élément bloc (est traité comme une boîte)
Syntaxe :
display : inline-block Survolez les blocs pour les transformer en éléments inline-block

table-cell

L’élément ne comporte comme une cellule de tableau (<td>)
Syntaxe :
display : table-cell Survolez les blocs pour les transformer en cellules de tableau

flex

L’élément ne comporte comme un conteneur flexible (nouveau en CSS3)
Syntaxe :
display : flex Survolez les blocs pour les transformer en boites flexibles

table

L’élément ne comporte comme un tableau
Syntaxe :
display : table

table-column

L’élément ne comporte comme une balise colonne de tableau (<col>)
Syntaxe :
display : table-column

table-caption

L’élément ne comporte comme une balise caption de tableau (<caption>)
Syntaxe :
display : table-caption

table-row

L’élément ne comporte comme une ligne de tableau (<tr>)
Syntaxe :
display : table-row

table-column-group

L’élément ne comporte comme un groupe de colonnes (<colgroup>)
Syntaxe :
display : table-column-group

table-header-group

L’élément ne comporte comme une entête de tableau (<thead>)
Syntaxe :
display : table-header-group

table-footer-group

L’élément ne comporte comme un pied de tableau (<tfoot>)
Syntaxe :
display : table-footer-group

table-row-group

L’élément ne comporte comme le corps d’un tableau (<tbody>)
Syntaxe :
display : table-row-group

inline-flex

L’élément ne comporte comme un conteneur flexible (nouveau en CSS3) en ligne
Syntaxe :
display : inline-flex

inline-table

L’élément ne comporte comme un tableau en ligne
Syntaxe :
display : inline-table

list-item

L’élément ne comporte comme un élément d’une liste
Syntaxe :
display : list-item

run-in

L’élément ne comporte comme un élément en bloc ou en ligne , selon le contexte
Syntaxe :
display : run-in

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
display : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
display : inherit

A voir aussi

clear– position– z-index– flex– align-content– align-items– align-self– columns– vertical-align