CSS line-height

CSS svojstvo line-height definiše količinu prostora koji se koristi za linije, najčešće u tekstu.

Često se brka sa razmakom između redova (vodećim) koji se koristi u Photoshopu i sličnim softverima.

Vodeći je termin koji opisuje udaljenost između polaznih linija u tekstu. U slučaju definisanja vodećeg, ispod teksta se uvek dodaje razmak . Ali, kada radite sa svojstvom visine linije, razmak se uvek dodaje jednako iznad i ispod teksta .

Line-height koristi nekoliko različitih vrsta jedinica :

• px ,
• em ,
• % ,
• unitless number ,
  Važno je napomenuti da je jedinična vrednost u osnovi samo procenat. Dakle, ako visina linije ima svojstvo 1,2 , to znači da ona samo ima vrednost od 120% .

Značaj visine linije

Najvažnija upotreba visine linije je učiniti vaš tekst čitljivim . Preporučuje se upotreba vrednosti bez jedinice bilo koje druge jedinice koja nije statična poput jedinice px .

Ako treba istovremeno podesiti veličinu fonta i visinu linije, postoji zgodan CSS skraćenica :

html {
  font: 24px/1.5 ‘Lato’, sans-serif;
}

Korišćenjem ove stenografije moći ćete istovremeno da podesite 3 elementa:

• font-size,
• line-height,
• font-family.

Svojstvo line-height primenjuje se samo na elemente kojima je svojstvo prikaza podešeno na inline ili inline-block . Ako je visina linije postavljena na elementu bloka, moglo bi doći do nekih promena, ali to je verovatno pogođeno samo ugrađenim podređenim elementima.

Ako postavite visinu linije bez jedinice, rezultat će biti vrednost visine linije pomnožena veličinom fonta elementa .

div {
  Font-family: ‘Lato’, sans-serif;
  Font-size: 14px;
  Line-height: 2 // equals to 28px
}

Nadam se da je ovaj članak pomogao da se razjasni značenje i upotreba svojstva line-height.

Hvala vam za čitanje!

Želite da pročitate više? Pretplatite se na naš bilten!