Màj: 10 janvier 2009
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.
p)Lorem ipsum dolor sit amet
Consectetuer adipiscing elit
Sed non risus
Suspendisse lectus tortor, dignissim sit amet
ul et
li)p {
display: list-item;
list-style-type: square;
margin: 0 0 0 40px;
}
ul {
display: block;
margin: 0;
padding: 0;
}
li {
display: block;
margin: .75em 0;
}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.