text-indent

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS text-indent définit la longueur de l'espace vide (indentation) qui est placé avant les lignes de texte dans un bloc.

Exemple interactif

text-indent: 0;

text-indent: 30%;

text-indent: -3em;

text-indent: 3em each-line;

text-indent: 3em hanging;

text-indent: 3em hanging each-line;

<section id="default-example">
  <div id="example-element">
    <p>
      Ce texte est contenu dans un seul paragraphe. Ce paragraphe comporte deux
      phrases.
    </p>
    <p>
      Ceci est un nouveau paragraphe. Il y a un élément de saut de ligne
      <code>&lt;br&gt;</code> après cette phrase.<br />Le voici&nbsp;! Remarquez
      comment cela affecte l'indentation.
    </p>
  </div>
</section>

section {
  font-size: 1.25em;
  background-color: darkslateblue;
  align-items: start;
}

#example-element {
  text-align: left;
  margin-left: 3em;
  background-color: slateblue;
  color: white;
}

L'espacement horizontal est par rapport au bord gauche (ou droit, pour les mises en page de droite à gauche) de la boîte de contenu de l'élément de niveau bloc contenant.

Syntaxe

css

/* Valeurs de type <length> */
text-indent: 3mm;
text-indent: 40px;

/* Valeurs de type <percentage> relative à la largeur du bloc englobant */
text-indent: 15%;

/* Valeurs avec un mot-clé */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Valeurs globales */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

Valeurs

<length>: L'indentation est définie de façon absolue avec une longueur (<length>). On peut utiliser des valeurs négatives. Voir la page sur <length> pour les différentes unités possibles.
<percentage>: L'indentation est un pourcentage (<percentage>) de la largeur du bloc englobant.
each-line: L'indentation affecte la première ligne du conteneur de bloc ainsi que chaque ligne après un saut de ligne forcé, mais n'affecte pas les lignes après un retour à la ligne automatique.
hanging: Inverse les lignes indentées. Toutes les lignes sauf la première seront indentées.

Définition formelle

Valeur initiale	`0`
Applicabilité	conteneurs de type bloc
Héritée	oui
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	le pourcentage tel que défini ou la longueur absolue, ainsi que les mots-clé comme définis
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Indentation simple

HTML

html

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

css

p {
  text-indent: 5em;
  background: powderblue;
}

Ignorer l'indentation sur le premier paragraphe

Une pratique typographique courante lorsque l'indentation des paragraphes est présente consiste à ignorer l'indentation pour le premier paragraphe. Comme l'indique The Chicago Manual of Style, « la première ligne de texte suivant un sous-titre peut commencer à gauche ou être indentée selon l'indentation habituelle du paragraphe ».

Traiter le premier paragraphe différemment des paragraphes suivants peut se faire en utilisant le combinateur de voisins directs, comme dans l'exemple suivant :

HTML

html

<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

CSS

css

p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

Résultat

Indentation proportionnelle

HTML

html

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

css

p {
  text-indent: 30%;
  background: plum;
}

Résultat

Spécifications

Spécification
CSS Text Module Level 3 # text-indent-property

Compatibilité des navigateurs

Voir aussi

Apprendre la mise en forme du HTML avec CSS
Propriétés CSS associées :
Le module de décoration de texte CSS
Le module de texte CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 2 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu