text-indent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété text-indent définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.

L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés hanging et each-line peuvent être utilisés pour modifier ce comportement.

Exemple interactif

Syntaxe

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

/* Valeurs de pourcentages */
/* relatives à la largeur  */
/* du bloc englobant       */
/* Type <percentage>       */
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: 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 définie en proportion de la largeur du bloc englobant (type <percentage>).

each-line

L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (wrap).

hanging

Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.

Définition formelle

Valeur initiale0
Applicabilitéconteneurs de type bloc
Héritéeoui
Pourcentagesse rapporte à la largeur du bloc contenant
Valeur calculéele pourcentage tel que spécifié ou la longueur absolue, ainsi que les mots-clé comme spécifiés
Type d'animationune sont interpolées comme des nombres réels à virgule flottante.">longueur, sont interpolées comme des nombres réels à virgule flottante.">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;
}

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

Specification
CSS Text Module Level 3
# text-indent-property

Compatibilité des navigateurs

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.