Propriété CSS text-indent

La propriété CSS text-indent définit la quantité d'espace vide avant la première ligne d'un bloc de texte — le classique « retrait de paragraphe » que l'on trouve dans les livres imprimés. Elle n'affecte que la première ligne de chaque élément de niveau bloc ; toutes les lignes suivantes restent alignées sur le bord de la boîte.

Par défaut, le retrait est ajouté au début de la ligne, ce qui suit la direction d'écriture définie par la propriété direction — au bord gauche pour un texte de gauche à droite, et au bord droit pour un texte de droite à gauche. Une valeur négative déplace la première ligne dans la direction opposée (vers la gauche pour un texte LTR), ce qui permet de créer un retrait négatif (ou retrait suspendu).

Pourquoi et quand l'utiliser

Retraits typographiques de paragraphe. Indenter la première ligne est la méthode traditionnelle pour séparer les paragraphes sans ligne vide entre eux — courant dans les articles longs et les mises en page de type livre.
Retraits suspendus. Un text-indent négatif associé à un padding-left correspondant laisse la première ligne avancée et enroule le reste — utile pour les bibliographies et les listes de définitions.
Masquer du texte de manière accessible. L'ancienne astuce text-indent: -9999px repoussait le texte hors de l'écran tout en le laissant lisible pour les lecteurs d'écran et les moteurs de recherche (aujourd'hui largement remplacée par des classes utilitaires visuellement cachées).

text-indent est héritée, donc une valeur définie sur un parent se propage aux conteneurs de blocs enfants à moins qu'elle ne soit remplacée.

Avertissement

Les valeurs "each-line" et "hanging" sont expérimentales.

Valeur initiale	0
S'applique à	Conteneurs de blocs.
Héritée	Oui.
Animatable	Oui. Text-indent est animatable.
Version	CSS1
Syntaxe DOM	object.style.textIndent = "100px";

Syntaxe

Syntaxe de la propriété CSS text-indent

text-indent: length | percentage | each-line | hanging | initial | inherit;

Exemple de la propriété text-indent :

Exemple de la propriété CSS text-indent avec une valeur en px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <p>
      This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.
    </p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété text-indent avec les unités "pt", "em", "%" et "cm" :

Exemple de la propriété CSS text-indent avec les valeurs pt, cm, % et em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        text-indent: 20pt;
      }
      div.b {
        text-indent: -5em;
      }
      div.c {
        text-indent: 70%;
      }
      div.d {
        text-indent: 4em;
      }
      div.e {
        text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Essayez vous-même »

Créer un retrait suspendu

Un text-indent négatif associé à un padding-left correspondant indente toutes les lignes sauf la première — le schéma standard pour les références et citations :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.reference {
        text-indent: -2em;
        padding-left: 2em;
      }
    </style>
  </head>
  <body>
    <p class="reference">
      Knuth, Donald E. The Art of Computer Programming. Reading,
      Massachusetts: Addison-Wesley, 1968. This long entry wraps onto
      several lines so you can see the hanging indent in action.
    </p>
  </body>
</html>

Valeurs en pourcentage

Lorsque vous passez un pourcentage, le retrait est calculé à partir de la largeur du bloc conteneur, et non de la taille de police. Ainsi, text-indent: 10% sur un conteneur de 600px de large produit un retrait de 60px. Comme la valeur est relative, le retrait augmente et diminue lorsque la mise en page est redimensionnée, ce qui le maintient proportionnel sur les pages responsives.

Valeurs

Valeur	Description	Essayer
length	Définit le retrait en px, pt, cm, em, etc. La valeur par défaut est 0. Les valeurs négatives sont autorisées.	Essayer »
percentage	Définit le retrait en pourcentage de la largeur du bloc conteneur.	Essayer »
each-line	Le retrait affecte la première ligne ainsi que chaque ligne après un saut de ligne forcé, mais n'affecte pas les lignes après un retour à la ligne souple. Cette valeur est une technologie expérimentale.
hanging	Inverse les lignes indentées. La première ligne n'est pas indentée. Cette valeur est une technologie expérimentale.
initial	Force la propriété à utiliser sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété text-indent en CSS ?

Elle indente la première ligne de texte dans un bloc.Elle change la couleur du texte.Elle indente toutes les lignes de texte dans un bloc.Elle ajuste la taille du texte.Elle modifie l'interligne du texte dans un bloc.

Propriétés associées

Pour un contrôle plus précis de l'espacement et du flux de votre texte, consultez ces chapitres associés :

text-align — alignement horizontal du texte dans son bloc.
line-height — espacement vertical entre les lignes.
letter-spacing et word-spacing — espacement entre les caractères et les mots.
white-space — gestion des espaces blancs et des sauts de ligne.
direction — la direction d'écriture qui détermine le bord de départ de text-indent.