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.

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.

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

Primjeri upotrebe visine linije

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

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.

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.

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.

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.

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