display CSS propriété

Définition de la CSS display.

La propriété CSS display permet de modifier le type de rendu d'un élément.

display : block;
display : inline;
display : inline-block;
display : table-cell;
display : list-item;
display : flex;
display : grid;

La propriété de feuille de style display CSS peut prendre la valeur de :

• none : l'élément n'est pas affiché et sort du flux.
• inline : l'élément est interprété comme étant un seule ligne (sauf nets version <6), ex:span.
• block : l'élément est interprété comme un bloc, ex:div.
• inline-block : l'élément est interprété comme à un élément inline avec un comportement bloc (CSS2). Compatible avec Internet Explorer, Opéra et Safari pour FireFox < 2 utiliser -moz-inline-box.
• list-item : l'élément est interprété comme un bloc principal avec dedans un élément inligne pour un item de liste, attention les versions netscape <6 font un décalage. Ex:li.
• run-in : l'élément est interprété comme un bloc ou une ligne, selon le contexte, ne semble pas implémenté sauf pour le navigateur opéra et safari.
• compact : l'élément est interprété comme un bloc ou une ligne, selon le contexte, ne semble pas implémenté sauf pour le navigateur opéra et safari.
• marker : l'élément est interprété comme un marqueur pour les listes par exemple ou les feuilles de styles auditives peut être considéré comme inline, supprimé en CSS2.1.
• table : l'élément est interprété comme une balise 'table'
• inline-table : l'élément est interprété comme une balise 'table'
• table-row-group : l'élément est interprété comme une balise 'tboby'
• table-header-group : l'élément est interprété comme une balise 'thead'
• table-footer-group : l'élément est interprété comme une balise 'tfoot'
• table-row : l'élément est interprété comme une balise'tr'
• table-column-group : l'élément est interprété comme une balise 'colgroup'
• table-column : l'élément est interprété comme une balise 'col'
• table-cell : l'élément est interprété comme une balise 'td', 'th'
• table-caption : l'élément est interprété comme une balise 'caption'
• flex : l'élément est interprété comme un élément block de type conteneur d'élément flexible.
• inline-flex : l'élément est interprété comme un élément en inline de type conteneur d'élément flexible.
• grid : l'élément est interprété comme un élément block de type conteneur d'élément grille.
• inline-grid : l'élément est interprété comme un élément en inline de type conteneur d'élément grille.

Exemple de code display CSS

Conditions d'application de la CSS display.

La propriété de feuille de style display CSS est applicable sur l'ensemble des balises HTML ou XHTML.
La propriété CSS display CSS est influencée par la propriété float CSS.

Problème d'interprétation de display en Css.

La propriété de feuille de style css display peut poser des problèmes.
Les valeurs table_*** ne sont pas reconnues par les versions d'Internet Explorer < 8.
La valeur inline-table n'est interprétée sous Firefox qu'a partir de la version 3 et sous Internet Explore < 8.
Firefox gère mal l'incrémentation du list-style-type pour list-item pour si le parent n'est pas ul, ol, menu ou dir (08-2015).