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: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
<ul>
<li style="display:list-item">un</li>
<li style="display:list-item">deux</li>
</ul

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

© 2009-2022 Xul.fr