Des paragraphes comme des items de liste et inversement

Florens Verschelde

Il est important, lorsqu'on débute l'apprentissage de CSS, de distinguer les différents type d'éléments HTML. On sépare généralement les éléments dits «de type block» (block-level) et les éléments dits «de type en-ligne» (inline).

Il s'agit cependant d'une simplification pédagogique (que l'on retrouve dans HTML 4.01 et dans le texte de la spécification CSS 2.1). En réalité, les éléments HTML n'ont pas de «type» à proprement parler. Par contre, ils ont un type de rendu par défaut, déterminé par la valeur par défaut de la propriété CSS display pour chaque élément.

Ainsi, pour prendre quelques exemples, les éléments div, p, ul, etc., sont par défaut en display: block; les éléments td sont par défaut en display: table-cell; et les éléments li sont en display: list-item.

En jouant sur la valeur de display, on peut obtenir des affichages différents de ceux que l'on attend classiquement. Petit exemple avec les paragraphes et les items de liste.

Démonstration (page seule):

Le code CSS utilisé est simple:

p {
    display: list-item;
    list-style-type: square;
    margin: 0 0 0 40px;
}

li {
    display: block;
    margin: 1em 0;
}

En conclusion: ce petit tour de passe-passe ne vous sera sans doute pas d'une grande utilité pratique. Mais il vous aura permis de découvrir une des possibilités de la propriété display que vous ne connaissiez peut-être pas.

Attention: certains navigateurs n'aiment pas trop les valeurs «inhabituelles» de la propriété display. Un display: table-cell pourrait s'avérer très pratique (pour juxtaposer des éléments, faire des colonnes de même hauteur…), mais Internet Explorer 6 et 7 l'ignorent superbement. Seule la version 8 offre un support correct de display: table-cell et display: inline-block.

Au sujet des utilisations «avancées» de la propriété display, on pourra lire Mise en page CSS avancée grâce à la propriété display.