`text-indent` în CSS

Adaugă un spațiu înaintea primului rând dintr-un paragraf, ca alineatele din cărți.

Sintaxă CSS

text-indent: 2em;
text-indent: 5%;
text-indent: -1.5em;          /* indentare negativă */
text-indent: 2em hanging;     /* toate rândurile, în afară de primul */
text-indent: 2em each-line;

Ce face `text-indent`

text-indent deplasează primul rând al unui bloc de text spre dreapta (sau spre stânga, cu valori negative). Se aplică elementelor bloc (<p>, <div>), nu elementelor inline precum <span>.

Proprietatea se moștenește. Dacă o pui pe un <div> care conține alte blocuri, fiecare paragraf din el primește alineatul.

Cuvintele cheie hanging (inversează indentarea: toate rândurile se mută, mai puțin primul) și each-line (indentare și după fiecare <br>) sunt mai noi: Firefox 121, Safari 15, Chrome 146.

Valori uzuale

Valoare	Descriere
`<lungime>`	Spațiul primului rând (em, rem, px); poate fi negativ.
`<procent>`	Procent din lățimea blocului care conține textul.
`hanging`	Indentează toate rândurile în afară de primul.
`each-line`	Indentează și primul rând de după fiecare rupere forțată (<br>).

Exemple

Exemplul 1: Alineate ca într-o carte

Primul paragraf după titlu nu are alineat, cele următoare au.

.articol p {
  margin: 0;
  text-indent: 1.5em;
}
.articol h2 + p {
  text-indent: 0;
}

Efect vizual în browser

Paragrafele povestirii „O seară la Iași” încep cu un spațiu de aproximativ două litere, iar primul paragraf de sub titlu începe lipit de margine, ca în cărțile tipărite.

Exemplul 2: Bibliografie cu indentare agățată

Indentare negativă plus padding: primul rând iese în stânga, rândurile următoare sunt aliniate mai la dreapta.

.bibliografie li {
  padding-left: 2em;
  text-indent: -2em;
}