text-indent
Définit le retrait de la première ligne de texte dans un bloc.
- Valeur initiale
0- Héritée
- Oui
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- conteneurs de bloc
- JavaScript
element.style.textIndent = "2em"
Exemple
#.book p + p {
text-indent: 1.5em;
margin-top: 0;
}<div class="book">
<p style="margin: 0">Le premier paragraphe d’un chapitre n’a généralement pas de retrait.</p>
<p style="text-indent: 1.5em; margin: 0">Les paragraphes suivants commencent par un retrait et n’ont pas d’espace entre eux, comme dans les livres.</p>
</div>Définition et utilisation
#La propriété text-indent décale la première ligne de texte d’un bloc de la valeur indiquée. C’est l’allure classique d’un paragraphe de livre : la première ligne commence avec un retrait, les suivantes partent du bord.
Une valeur négative crée ce qu’on appelle un retrait négatif : la première ligne dépasse vers la gauche par rapport aux autres. On l’utilise par exemple dans les bibliographies.
Les pourcentages se calculent par rapport à la largeur du bloc. Le retrait ne concerne que la première ligne du bloc ; même après un retour à la ligne forcé par <br>, il ne se répète pas.
Syntaxe
#text-indent: <longueur> | <pourcentage>;Valeurs
#Valeurs en pratique
#0
.demo { text-indent: 0; }2em
.demo { text-indent: 2em; }-1.5em
.demo { text-indent: -1.5em; padding-left: 1.5em; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- En typographie de livre, on utilise soit un retrait, soit un espace entre les paragraphes, rarement les deux à la fois.
- Ne masquez pas de texte avec un grand retrait négatif. L’ancienne astuce
text-indent: -9999pxnuit à l’accessibilité.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.