Linie-înălțime - CSS-Tricks

line-heightProprietatea definește cantitatea de spațiu deasupra și sub elemente inline. Adică elemente setate la display: inlinesau display: inline-block. Această proprietate este folosită cel mai adesea pentru a seta linia de întâmpinare pentru liniile de text.

p ( line-height: 1.5; )

line-heightProprietatea poate accepta valorile de cuvinte cheie normalsau noneprecum și un număr, lungime, sau procent.

Conform specificațiilor, o valoare „normală” nu este doar o singură valoare concretă care se aplică tuturor elementelor, ci se calculează mai degrabă la o valoare „rezonabilă” în funcție de dimensiunea fontului setată (sau moștenită) pe element.

O valoare a lungimii poate fi definită utilizând orice unitate CSS validă (px, em, rem, etc).

O valoare procentuală este dimensiunea fontului elementului înmulțită cu procentajul. De exemplu:

Verificați acest stilou!

În demo-ul de mai sus, cele trei paragrafe au înălțimile de linie setate la 150%, 200% și respectiv 250%. Elementul corp are dimensiunea fontului definit la 20 px. Aceasta înseamnă că înălțimile de linie calculate pentru paragrafe sunt 30px, 40px și, respectiv, 50px.

Înălțimi de linie fără unitate

Metoda recomandată pentru definirea înălțimii liniei este utilizarea unei valori numerice, denumită înălțimea liniei „fără unitate”. O valoare numerică poate fi orice număr, inclusiv un număr bazat pe zecimale, așa cum este utilizat în primul exemplu de cod de pe această pagină.

Înălțimile de linie fără unitate sunt recomandate datorită faptului că elementele copil vor moșteni valoarea numărului brut, mai degrabă decât valoarea calculată. Cu aceasta, elementele copil își pot calcula înălțimile de linie pe baza dimensiunii fontului calculat, mai degrabă decât să moștenească o valoare arbitrară de la un părinte care este mai probabil să aibă nevoie de suprascriere.