CSS Espacement du texte
Espacement du texte CSS
CSS propose plusieurs propriétés pour contrôler l'espacement du texte.
Dans ce chapitre, vous apprendrez à utiliser les propriétés suivantes :
Indentation du texte CSS
La propriété CSS text-indent permet de spécifier l'indentation de la première ligne d'un bloc de texte.
Astuce : Les valeurs négatives sont autorisées. La première ligne sera indentée vers la gauche si la valeur est négative.
Exemple
Indentez la première ligne de texte dans un bloc de texte :
p {
text-indent: 50px;
} Espacement des lettres CSS
La propriété CSS letter-spacing permet de spécifier l'espace entre les caractères d'un texte.
Astuce : Les valeurs négatives sont autorisées.
Exemple
Augmentez et diminuez l'espace entre les caractères :
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
} Hauteur de ligne CSS
La propriété CSS line-height permet de spécifier l'espace entre les lignes.
Remarque : Les valeurs négatives ne sont pas autorisées.
Exemple
Spécifiez l'espace entre les lignes :
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
} Espacement des mots CSS
La propriété CSS word-spacing permet de spécifier l'espace entre les mots d'un texte.
Astuce : Les valeurs négatives sont autorisées.
Exemple
Augmentez et diminuez l'espace entre les mots :
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
} Espace blanc CSS
La propriété CSS white-space spécifie comment l'espace blanc à l'intérieur d'un élément est géré.
Cette propriété peut avoir l'une des valeurs suivantes :
-
normal -
nowrap -
pre -
pre-line -
pre-wrap
Exemple
Comment désactiver le retour à la ligne du texte à l'intérieur d'un élément
p {
white-space: nowrap;
} Les propriétés d'espacement du texte CSS
| Propriété | Description |
|---|---|
| letter-spacing | Spécifie l'espace entre les caractères d'un texte |
| line-height | Spécifie la hauteur de ligne |
| text-indent | Spécifie l'indentation de la première ligne dans un bloc de texte |
| white-space | Spécifie comment gérer l'espace blanc à l'intérieur d'un élément |
| word-spacing | Spécifie l'espace entre les mots d'un texte |