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 dont s'affichent les composantes de la page et leur alignement.
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:inlinePour supprimer de l'affichage sans effet sur la mise en forme, on utilisera plutôt la propriété visibility:
visibility:hiddenEt 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
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
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érence : Le modèle de mise en forme visuel de CSS 2.0.
Voir aussi
- Enjoliver la balise H1 en CSS pur.
La différence entre les valeurs block et inline de la propriété display sont mises en relief dans différentes façons de donner une image de fond à une balise, en l'occurence la balise de titre de page.