Accueil    CSS    Propriété display
 



style css display  Style CSS display

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété display joue un rôle important dans la disposition des éléments. Elle détermine le mode d'affichage des éléments et leur comportement par rapport aux éléments adjacents.
Si on distingue initialement les types d'affichage "block" et "inline", de nombreuses autres valorisations existent, permetant d'affiner de façon précise par le css le rendu des éléments html.

Voici le descriptif de ces valorisations possibles pour le style css display :

   - none : l'élément n'est pas affiché
   - block : l'élément est affiché en tant que type block (comme <div> ou <p> par exemple) :
     il provoque un retour à la ligne avant et après sa déclaration
   - inline : l'élément est affiché en type inline (comme <span> ou <label> par exemple),
     il s'affiche à la suite des éléments qui le précède et ne provoque pas de retour à la ligne
   - inline-block : l'élément est affiché en type inline mais se comporte comme un élément de
     type bloc (pour le positionement par exemple)
   - inline-table : l'élément est affiché comme un tableau en type inline, sans provoquer de
     retour à la ligne avant et après sa déclaration
   - list-item : l'élément est affiché comme un élément de liste et provoque un retour à la ligne
     avant et après sa déclaration
   - table : l'élément est traité comme un tableau html <table>
   - table-caption : l'élément est traité comme l'élément <caption> d'un tableau html
   - table-cell : l'élément est traité comme une cellule <td> d'un tableau html
   - table-column : l'élément est traité comme l'élément <col> d'un tableau html
   - table-column-group : l'élément est traité comme l'élément <colgroup> d'un tableau html
   - table-footer-group : l'élément est traité comme l'élément <thead> d'un tableau html
   - table-header-group : l'élément est traité comme l'élément <tfoot> d'un tableau html
   - table-row : l'élément est traité comme l'élément <tr> d'un tableau html
   - table-row-group : l'élément est traité comme l'élément <tbody> d'un tableau html


Remarque sur le style inline-block : Ce style est interprété par IE 9 uniquement si un doctype est spécifié et est interprété correctement par les versions inférieures d'IE si l'élément auquel est soumis ce style est initialement de type inline.


Propriétés pour le style display :




Propriété Définition Valeurs CSS
display Détermine le mode d'affichage des éléments html et leur comportement par rapport aux éléments adjacents none, block, inline
inline-block, inline-table
list-item, table
table-caption
table-cell, table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
inherit
CSS 1


Exemple d'utilisation du style css outline-color :




Application des différentes valorisations de la propriété display :


Texte avant un élément block
<div style="border:dashed 1px black; padding:2px;">Elément block</div>
Texte après un élément block


Texte avant un élément inline
<span style="border:dashed 1px black; padding:2px;">Elément inline</span>
Texte après un élément inline


Texte avant un élément inline-block
<div style="border:dashed 1px black; display:inline-block; padding:2px;">
   Elément inline-block
</div>
Texte après un élément inline-block


Texte avant un tableau
<table cellpadding="3px" rules="all" style="border:solid 1px black;
   border:collapse:collapse;">
   <tr><td>cellule 1</td><td>cellule 2</td></tr>
   <tr><td>cellule 3</td><td>cellule 4</td></tr>
</table>
Texte après un tableau


Texte avant un tableau inline-table
<table cellpadding="3px" rules="all" style="border:solid 1px black; display:inline-table;
   border:collapse:collapse;">
   <tr><td>cellule 1</td><td>cellule 2</td></tr>
   <tr><td>cellule 3</td><td>cellule 4</td></tr>
</table>
Texte après un tableau inline-table


Texte avant un élément list-item
<span style="display:list-item; margin-left:40px; padding:2px;">
   Element affiché avec le style display:list-item
</span>
Texte après un élément list-item



Application des différentes valorisations de la propriété display :


Texte avant un élément block
Elément block
Texte après un élément block


Texte avant un élément inline Elément inline Texte après un élément inline


Texte avant un élément inline-block
Elément inline-block
Texte après un élément inline-block


Texte avant un tableau
cellule 1cellule 2
cellule 3cellule 4
Texte après un tableau


Texte avant un tableau inline-table
cellule 1cellule 2
cellule 3cellule 4
Texte après un tableau inline-table


Texte avant un élément list-item Element affiché avec le style display:list-item Texte après un élément list-item




Exemple de mise en forme d'un tableau basé sur des éléments <div> et les affichages de type "table" :

Div 1
Div 2
Div 3
Div 4
Div 5
Div 6