Propriétés du texte

• • word-spacing: normal
  • word-spacing: 3em
• • letter-spacing: normal
  • letter-spacing: 0.25em
• • text-decoration: none
  • text-decoration: underline
  • text-decoration: line-through
  • text-decoration: blink
  • text-decoration: overline
• • text-transform: none
  • text-transform: capitalize
  • text-transform: uppercase
  • text-transform: lowercase
• • text-align: left
  • text-align: right
  • text-align: center
  • text-align: justify; bla blabla blabla blabla blabla blabla blabla blabla blabla
• • text-indent: 2em
  • text-indent: 10%
• • line-height: normal
  • line-height: 2
  • line-height: 2em
  • line-height: 200%
• • vertical-align: baseline text-decoration:underline
  • vertical-align: middle text-decoration:underline
  • vertical-align: sub text-decoration:underline
  • vertical-align: super text-decoration:underline
  • vertical-align: text-top text-decoration:underline
  • vertical-align: text-bottom text-decoration:underline
  • vertical-align: top text-decoration:underline
  • vertical-align: bottom text-decoration:underline

Piège

Lorsqu'on met des img dans une table, les propriétés vertical-align et line-height influencent la présentation d'une manière a priori peu intuitive, différente du résultat donné par le tag soup parsing. C'est le (faux) bug le plus dupliqué (plus de 100 rapports) dans la liste de bugs de Mozilla.

texte Éç texte Éç texte Éç texte Éç

texte Éç texte Éç texte Éç texte Éç

On remarque le vertical-align:baseline sur les img.

↓ Sans texte

L'image est alignée avec la ligne de texte, comme les caractères. On remarque le vertical-align:baseline sur les img.

↓ img { vertical-align: bottom }

Une image seule crée une ligne de texte car c'est un élément «en ligne» (display:inline). On remarque le line-height non nul.

↓ td { line-height: 0 }