Postavke u CSS: udaljenost između redaka

U CSS, udaljenost između linija vrlo je jednostavna za postavljanje. Za to je poseban posjed. No, naravno, postoje mnogi drugi parametri koji su univerzalni i mogu se primijeniti na tekst.

Ako nema postavki, postavljene su zadane vrijednosti. Ako želite, možete promijeniti tu udaljenost. Vrijednost može biti u postotku ili u pikselima.

Visina reda

U CSS, udaljenost između linija može se prikazati sljedećom figurom.

css linija

Gornja slika prikazuje parametre s odgovarajućim udaljenostima. Tekst se nalazi u prostoru veličine fontova. Napominjemo da crta teksta ne počinje na tlu, ali malo viša. Donji prostor predviđen je za slova s ​​elementima ispod (g, y i tako dalje).

Imajte na umu da se prostor između blokova fontova naziva vodeći. U HTML-u i CSS-u ovo se svojstvo ne pojavljuje na bilo koji način, ali se nalazi u drugim grafičkim i tekstualnim urednicima. Na primjer, u programu Adobe Photoshop.

vodeći u Photoshopu

Slika gore pokazuje gdje u Photoshopu možete odrediti vodeći. Broj označava parametar veličine fontova.

veličina fonta u Photoshopu

Primjeri upotrebe visine linije



U CSS, udaljenost između linija može se podesiti postotkom. Ilustrativni primjer je dan dolje.

udaljenost između linija html

U slučaju male vrijednosti, korisnik vaše web stranice će biti neugodno za čitanje.

Udaljenost se može mijenjati i veličina fonta. Ako je razlika između glavnih parametara vrlo različita u slikama, tada se ta razlika nadoknađuje povećanjem vode.

Suptilnost dizajna

U CSS, udaljenost između linija može se dodatno podesiti s različitim indentima. Razmotrite primjer na slici.

Povećajte udaljenost između crta css

U polju "Element", u našem slučaju će biti tekst. Padding je ulomak unutar objekta, a margina je uvlačenje objekta. Granica je okvir. Može biti 0 piksela, i možda 100.

Sljedeća slika prikazuje sve uvlake, okvir i visinu tekstualne linije odjednom.

Oblikovanje udaljenosti između redaka u CSS-u

Ako imate mali tekst, sve u jednom retku, ili svaku liniju u zasebnom odlomku, tada se udaljenost može podesiti unosom između tih stavaka. To znači da maring i padding između linija u jednom elementu nema učinka. Oni samo uvlače rubove objekta. Objekt je cijeli odlomak, a ne crta u njemu. Važno je da se ovdje ne zbunite.

U slučajevima gdje postoji mnogo redaka, a sve se to nalazi u jednom objektu, font se preporučuje da se promijeni s glavnim parametrima.

Kako povećati udaljenost između CSS linija

Udaljenost između redaka HTML-a može se dodijeliti klasi ili svim odlomcima u tekstu. Ako navedete ovo: p {line-height: 20px; }, tada će apsolutno svi odlomci na stranici biti s linijama od 20 piksela. Ako vam je potrebno različite veličine na različitim mjestima, preporučljivo je učiniti sljedeće.

Odredite stilove.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Radi jasnoće, dodajte okvir kako biste vidjeli kako funkcionira. U budućnosti, ona mora biti uklonjena.

Zatim primijenite ove klase. Rezultat je sljedeći.

primjeri izmjene udaljenosti između linija

Imajte na umu da je u trećem slučaju bend naletio na tekst. Sve zbog činjenice da veličina fonta veća od visine linije. Stoga je važno osigurati da nema takvih proturječnosti. Ako napravite malu visinu crte, smanjite font prema tome.

Ne preporučuje se previše teksta i male udaljenosti između redaka. Budući da nijedan korisnik ne može sve to pročitati mirno. Oči će mu se brzo umoriti. Tražilice također kažu da je tekst user-friendly.

Štoviše, nedavno je veliki naglasak na pogodnosti za mobilne korisnike. Tamo, preporuke uvijek kažu da veličina fonta treba biti normalna, a ne mala. To posebno utječe na veze. S malom veličinom, korisnik će imati poteškoća u korištenju navigacije na web mjestu.

Googleova tražilica ima poseban alat koji pomaže u ovoj analizi. Vrlo je pogodno za webmastere.

Evo primjera rezultata koji mogu biti.

Provjera upotrebljivosti css za korisnike

Preporuča se upotreba njihovih savjeta jer ti kriteriji utječu na rezultat pretraživanja.

Dijelite na društvenim mrežama:

Povezan
Kako smanjiti font na računalu: sve o postavljanju fontovaKako smanjiti font na računalu: sve o postavljanju fontova
Što je gornja i donja slova na tipkovnici?Što je gornja i donja slova na tipkovnici?
Polja u Riječi. Kako postaviti polja u "Word"Polja u Riječi. Kako postaviti polja u "Word"
Kako umetnuti tekst na sliku i obrnutoKako umetnuti tekst na sliku i obrnuto
Crvena crta u Riječi: kako raditi s njom?Crvena crta u Riječi: kako raditi s njom?
Upravitelj slika - img oznakaUpravitelj slika - img oznaka
Jedan i pol interval: ovo je koliko i kako se izračunavaJedan i pol interval: ovo je koliko i kako se izračunava
Što je font fonta?Što je font fonta?
Kako smanjiti udaljenost između redaka u "Riječi": osnovna rješenja za početnikeKako smanjiti udaljenost između redaka u "Riječi": osnovna rješenja za početnike
Kako dodati i instalirati fontove u Photoshop CS6?Kako dodati i instalirati fontove u Photoshop CS6?
» » Postavke u CSS: udaljenost između redaka