Display, une propriété pour contrôler l'affichage
Display est une directive pour l'agencement d'une page ou d'un élément de la page, elle influe profondément sur la façon sont s'affichent les composantes de la page.
display:none
L'élément auxquel s'applique cet directive n'est pas affiché. On peut l'afficher de façon dynamique en changeant la valeur de l'attribute, par exemple:
display:inline
Pour supprimer de l'affichage sans effet sur la mise en forme, on utilisera plutôt la propriété visibility:
visibility:hidden
Et visibility:visible pour faire apparaître l'élément.
display:inline
La valeur par défaut. L'élément est affiché dans le flot, sans retour à la ligne.
Si on assigne à la balise li la propriété inline, les éléments d'une liste s'afficheront l'un après l'autre et non l'un au dessous de l'autre. li à par défaut la propriété display:list-item.
Exemple:
<ul> <li style="display:inline">un</li> <li style="display:inline">deux</li> </ul
- un
- deux
<ul> <li style="display:list-item">un</li> <li style="display:list-item">deux</li> </ul
- un
- deux
On supprime les puces avec display:block.
display:list-item
Affichage sous forme de liste, avec retour à la ligne après l'élément et une puce avant. La puce et l'élément sont en succession inline.
display:block
Un retour à la ligne est généré avant l'affichage de l'élément, et après. L'élément fonctionne comme une boite.
Ainsi si l'on place dedans par exemple une balise dont le style est clear:both, la séparation ne s'applique qu'aux éléments contenus, tandis qu'en mode inline, elle s'applique aux élément de la page entière.
display:inline-block
(Ne fonctionne pas sur les versions anciennes d'Internet Explorer).
L'élément est une boite, mais lui-même est inséré dans le flot en mode inline, sans retour à la ligne.
display:table
(Ne fonctionne pas sur les versions anciennes d'Internet Explorer).
Affiche les éléments sous un mode tabulaire. On peut assigner aux éléments contenu le style des composantes d'une table: table-column, table-row, table-cell, etc. Voir documentation plus bas.
Ce mode convient plutôt lorsque le style s'applique à un conteneur dont les éléments sont organisés en table avec les styles appropriés.
display:inherit
Le mode d'affichage sera le même que celui du conteneur.
Références
- Le modèle de mise en forme visuel de CSS 2.0.
- The display property dans CSS 2.1. Document du W3C.