Použitie vlastnosti CSS Line Height na získanie CSS Line Spacing
Naučte sa, ako používať výšku riadkov vo vlastnostiach štýlu CSS, aby ste ovplyvnili rozmiestnenie riadkov na webových stránkach.
Hodnoty vzdialenosti CSS
Riadkovanie medzi riadkami CSS je ovplyvnené výškou riadka výšky vlastností štýlu CSS. Táto vlastnosť trvá až 5 rôznych hodnôt:
- normálne: prehliadač určuje hodnotu riadkovania, ktorá súvisí s veľkosťou písma. Toto je zvyčajne rovnaké ako veľkosť písma alebo mierne väčšia (napríklad 20%).
- dediť: rozdelenie riadkov by sa malo odobrať z riadkových riadkov. Takže ak nastavíte výšku línií značky tela o 30% väčšiu ako veľkosť písma a značky vnútri, ktoré sú nastavené na zdedenie, budú mať tiež výšku riadkov o 30% väčšiu ako veľkosť písma.
- číslo: Ak hodnota výšky riadku nemá meraciu jednotku, považuje sa to za násobiteľ veľkosti písma pre výšku čiary. Takže výška výšky riadku 1,25 by bola o 25% väčšia ako veľkosť písma.
- dĺžka: Ak má hodnota výšky čiary meraciu jednotku, presne tak by mal byť medzi jednotlivými čiarami. Takže 1,25 mm by znamenalo rozdelenie 1,25 milimetrov.
- percento: Ak je výška riadku v percentách, bolo by to percento veľkosti písma. Takže výška výšky 125% by bola o 25% väčšia ako veľkosť písma.
Ktorá hodnota by ste mali použiť na vzdialenosť CSS
Vo väčšine prípadov je najlepšou voľbou pre rozdelenie riadkov, aby ste to nechali ako predvolené - alebo "normálne". Toto je všeobecne najviac čitateľné a nevyžaduje, aby ste urobili niečo zvláštne. Ale zmena riadkovania môže dať vášmu textu iný pocit.
Ak je veľkosť písma definovaná ako ems alebo percentá, taktiež by ste mali definovať výšku vašej čiary. Toto je najflexibilnejšia forma riadkovania, pretože umožňuje čitateľovi meniť veľkosť písma a udržiavať rovnaký pomer medzi riadkami.
Nastavte výšku čiar pre listy štýlov tlače s bodovou hodnotou (pt). Ide o tlačové opatrenie a veľkosť písma by mala byť taktiež v bodoch.
Nechcem používať voľbu čísla, pretože som zistil, že je pre ľudí toľko mätúce. Mnohí ľudia si myslia, že počet je absolútna veľkosť a robia to obrovské. Napríklad, môžete mať písmo nastavené na 14px a potom nastavíte výšku riadku na 14 - čo vedie k obrovským rozdielom medzi riadkami - pretože rozdelenie riadkov je nastavené na 14- násobok veľkosti písma.
Koľko miesta by ste mali použiť na vzdialenosť medzi riadkami
Ako som už uviedol, odporúčam použiť predvolené riadkovanie, pokiaľ nemáte konkrétny dôvod na zmenu. Zmena rozstupu riadkov môže mať rôzne efekty:
- Text, ktorý je veľmi tesný, môže byť ťažko čitateľný. Malé riadkové medzery však môžu ovplyvniť náladu textu. Ak je text skrútený spoločne, môže sa zdať, že text sa zdá byť tmavší alebo napätší.
- Text, ktorý je ďaleko od seba, môže byť tiež ťažko čitateľný. Rozsiahle riadkové medzery však spôsobujú, že text je viac tečúci a plynulý.
- Zmena medzery medzi riadkami môže spôsobiť, že text, ktorý inak by sa nezmestí do priestoru, nebol kompaktnejší a nevyužil viac priestoru vo vašom dizajne.