display
L'aspect le plus courant de la propriété de style display dans DHTML consiste à configurer les scripts de sorte qu'ils basculent entre l'affichage et le masquage complet de l'élément et de son espace. Lorsque la propriété a pour valeur none, l'élément est masqué et tous les contenus avoisinants sont redimensionnés pour remplir l'espace qu'il occuperait normalement.
Ceci est à distinguer de la propriété visibility qui réserve un espace pour l'élément même si ce dernier n'est pas affiché. Cependant, pour restaurer le mode d'affichage par défaut de l'élément, vous pouvez attribuer l'un des types d'affichage courant (block et inline) ou le type plus spécifique de l'élément (par exemple, list-item pour un élément li), s'il est pris en charge par vos navigateurs cibles.
Dans le même temps, la propriété display vous permet de remplacer le comportement d'affichage par défaut des éléments. Un élément de type "en-ligne" peut alors se comporter comme un élément "bloc" et vice-versa (voir Eléments bloc et en-ligne). Grace à cette propriété, n'importe quel élément peut également se comporter comme une partie de tableau.
Les spécifications CSS identifient divers types d'affichages, mais la prise en charge des navigateurs est plus limitée. Le tableau suivant indique les types pris en charge.
| Type d'affichage | IE/Windows | IE/Mac | CSS |
|---|---|---|---|
| block | 5 | 4 | 2 |
| compact | s.o | s.o | 2 |
| inline | 5 | 4 | 2 |
| inline-block | 5.5 | s.o | s.o |
| inline-table | s.o | 5 | 2 |
| list-item | 5 | 5 | 2 |
| marker | s.o | s.o | 2 |
| none | 4 | 4 | 2 |
| run-in | s.o | 5 | 2 |
| table | s.o | 5 | 2 |
| table-caption | s.o | 5 | 2 |
| table-cell | s.o | 5 | 2 |
| table-column-group | s.o | 5 | 2 |
| table-footer-group | 5.5 | 5 | 2 |
| table-header-group | 5 | 5 | 2 |
| table-row | s.o | 5 | 2 |
| table-row-group | s.o | 5 | 2 |
Fonction de l'élément.
Tous les éléments (mais certains types d'affichage s'appliquent à des éléments spécifiques).
Ce site vous a plu ? Visitez aussi :
et
Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.
![]()
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Premiers pas
Héritages
Eléments "blocs"
Mise en page
Faire des tableaux
Pseudo-frames
Menu déroulant
Styles alternatifs
10 trucs à savoir
Couleurs CSS
Classement alphabétique
Classement par familles
Réflexions et prises de tête
Les fausses promesses
Tableaux contre CSS : le combat
Les ayatollahs
Accueil
Recherche
Imprimer
Haut de page
Page précédente
Page suivante
Accessibilité
Copyrights
Contact
Référencer un site web