La propriété text-indent définit la quantité d'espace horizontal 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.

Syntaxe

/* 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.

Syntaxe formelle

<length-percentage> && hanging? && each-line?


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

Exemples

Indentation simple

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

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

Résultat

Indentation proportionnelle

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

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

Résultat

Spécifications

Spécification État Commentaires
CSS Text Module Level 3
La définition de 'text-indent' dans cette spécification.
Version de travail Ajout des mots-clés hanging et each-line.
CSS Transitions
La définition de 'text-indent' dans cette spécification.
Version de travail text-indent peut être animée.
CSS Level 2 (Revision 1)
La définition de 'text-indent' dans cette spécification.
Recommendation The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
CSS Level 1
La définition de 'text-indent' dans cette spécification.
Recommendation Définition initiale.

Valeur initiale0
Applicabilitéconteneurs de type bloc
Héritéeoui
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéele pourcentage tel que spécifié ou la longueur absolue, ainsi que les mots-clé comme spécifiés
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniqueLa longueur ou le pourcentage avant les mots-clés, si les deux sont présents. Si plusieurs mots-clés sont présents, ils apparaissent dans le même ordre que dans la grammaire formelle.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
each-line
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
hanging
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, neurone12000, Prinz_Rana, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,