Nastavitve v CSS: razdalja med vrsticami

V CSS je razdalja med vrsticami zelo enostavna. Za to je posebna lastnina. Toda seveda obstaja veliko drugih parametrov, ki so univerzalni in jih je mogoče uporabiti za besedilo.

Če nastavitev ni nastavljena, so nastavljene privzete vrednosti. Če želite, lahko to razdaljo spremenite. Vrednost je lahko v odstotkih ali v slikovnih pikah.

Višina vrstice

V CSS je razdalja med vrsticami prikazana na naslednji sliki.

Zgornja slika prikazuje parametre z ustreznimi razdaljami. Besedilo se nahaja v prostoru velikosti pisave. Upoštevajte, da se vrstica besedila ne začne na tleh, ampak nekoliko višja. Prostor spodaj je predviden za črke, ki imajo elemente od spodaj (g, y in tako naprej).

Upoštevajte, da je prostor med bloki velikosti pisave imenovan vodilni. V HTML in CSS ta lastnost ni prikazana na noben način, vendar je v drugih grafičnih in besedilnih urednikih. Na primer, v programu Adobe Photoshop.

Zgornja slika prikazuje, kje v Photoshopu lahko določite vodilno. Številka označuje velikost pisave.

Primeri uporabe višine linije

V CSS se lahko razdalja med vrsticami nastavi za odstotek. Ilustrativni primer je naveden spodaj.

V primeru majhne vrednosti bo uporabniku vaše spletne strani neprijetno brati.

Razdalja lahko spremenite in velikost pisave. Če je razlika med glavnimi parametri v številkah zelo različna, se ta razlika kompenzira s povečanjem vodenja.

Tranzitnost oblikovanja

V CSS se lahko razdalja med vrsticami dodatno prilagodi z različnimi alineji. Upoštevajte primer na sliki.

V polju "Element" bo v našem primeru prišlo do besedila. Obloga je v notranjosti predmeta, rob pa je zasuk predmeta. Border je okvir. Lahko je 0 pikslov in morda 100.

Naslednja slika prikazuje vse podlage, okvir in višino besedilne vrstice hkrati.

Če imate majhno besedilo, vse v eni vrstici ali vsako vrstico v ločenem odstavku, se lahko razdalja nastavi z zamikom med temi odstavki. To pomeni, da maring in padding med vrsticami v enem elementu nima učinka. Ležejo robove predmeta. Objekt je celoten odstavek, ne linija v njem. Pomembno je, da se tu ne zmedite.

V primerih, ko je veliko vrstic in se vse to nahaja v enem objektu, je priporočljivo, da se pisava spremeni z glavnimi parametri.

Kako povečati razdaljo med linijami CSS

Razdalja med vrsticami HTML se lahko dodeli v razred ali vse odstavke v besedilu. Če navedete to: p {line-height: 20px; }, potem bodo absolutno vsi odstavki na strani z vrsticami 20 pikslov. Če potrebujete različne velikosti na različnih mestih, je priporočljivo storiti, kot sledi.

Predpišejo sloge.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Za jasnost dodajte okvir, da boste videli, da deluje. V prihodnosti jo je treba odstraniti.

Nato uporabite te razrede. Rezultat je naslednji.

Upoštevajte, da je v tretjem primeru skupina naletela na besedilo. Vse zaradi tega, da velikost pisave večja od višine črte. Zato je pomembno zagotoviti, da takih protislovij ni. Če naredite majhno višino črt, ustrezno zmanjšajte pisavo.

Ni priporočljivo, da naredimo premalo besedila in majhno razdaljo med vrsticami. Ker noben uporabnik tega ne počuti mirno. Njegove oči bodo kmalu utrujene. Iskalniki pravijo tudi, da je besedilo prijazno uporabnikom.

Poleg tega je v zadnjem času velik poudarek na priročnosti za mobilne uporabnike. Priporočila vedno pravijo, da mora biti velikost pisave normalna, ne pa majhna. To močno vpliva na povezave. Z majhno velikostjo bo imel uporabnik težave pri uporabi navigacije na spletnem mestu.

Iskalnik Google ima posebno orodje, ki pomaga pri tej analizi. Za spletne skrbnike je zelo priročno.

Tukaj je primer rezultatov, ki so lahko.

Priporočljivo je, da uporabite svoje namige, saj ta merila vplivajo na rezultat iskanja.