Setări în CSS: distanța dintre rânduri

În CSS, distanța dintre linii este foarte ușor de configurat. În acest scop, există o proprietate specială. Dar, desigur, există mulți alți parametri, care sunt universale și pot fi aplicate la text.

Dacă nu se face nici o ajustare, vă sunt setate la valorile implicite. aveți posibilitatea să modificați distanța, dacă se dorește. Valoarea poate fi fie un procent sau pixeli.

rând Înălțime

Distanta dintre liniile CSS poate fi demonstrată prin următoarea figură.

În imaginea de mai sus arată parametrii corespunzători cu distanțele. Textul este în spațiu font-size. Rețineți că linia de text nu pornește de la bază și ușor mai mare. Spațiul de mai jos pentru litere cu elemente de fund (g, y, și așa mai departe).

Rețineți că spațiul dintre blocuri font-size este numit lider. Cu HTML și CSS această proprietate nu apare, dar este în celelalte editori grafice și text. De exemplu, în Adobe Photoshop.

Figura de mai sus arată în cazul în care în „Photoshop“, puteți specifica de conducere. Și specificat următoarea setare font-size.

Exemple de utilizare a liniei de înălțime

În CSS, distanța dintre liniile pot fi setate la sută. Un exemplu ilustrativ este prezentat mai jos.

În cazul valorilor mici ale utilizatorului site-ului dvs. va fi un inconvenient pentru a citi.

Distanța poate fi variată și dimensiunea fontului. În cazul în care diferența dintre parametrii de bază vor diferi foarte mult în cifre, diferența este compensată de creșterea de conducere.

subtilitățile de proiectare

Distanta dintre CSS linii pot personaliza în continuare diverse liniuțe. Luați în considerare exemplul din figură.

În „Element“ în acest caz, va fi textul. Padding - padding este în interiorul obiectului, iar marja - adâncitura obiectului. Border - acest cadru. Acesta poate fi 0 pixeli și poate fi 100.

Imaginea următoare prezintă imediat toate marginile, cadrul și înălțimea unei linii de text.

Dacă aveți un text mic, toate într-o singură linie, sau fiecare linie într-un paragraf separat, distanța poate fi reglată între paragrafe indentate. Aceasta este Maring și padding între liniile într-o singură celulă va avea nici un efect. Acestea creează indentare numai la marginile obiectului. Obiect - acest întreg paragraf, în loc de linii în ea. Este important să nu pentru a obține confuz.

În cazul în care un număr mare de rânduri, toate acestea sunt situate în același obiect, fontul este recomandat pentru a schimba parametrii de bază.

Cum de a crește distanța dintre liniile de CSS

Distanța dintre liniile de cod HTML, vă puteți înregistra la orice clasă sau pentru toate paragrafele din text. Dacă specificați astfel: p {line-height: 20px; } - atunci absolut toate punctele de pe pagină vor fi șiruri de 20 de pixeli. Dacă doriți în locuri diferite în diferite dimensiuni, se recomandă să se facă după cum urmează.

Noi prescrie stiluri.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Pentru claritate, vom adăuga un cadru, astfel încât să puteți vedea că funcționează. În viitor, acesta trebuie să fie eliminate.

În continuare, vom folosi aceste clase. Rezultatul este după cum urmează.

Rețineți că, în al treilea caz, trupa a condus la textul. Tot din cauza faptului că dimensiunea fontului este mai mare decât înălțimea liniei. Prin urmare, este important să se asigure că astfel de conflicte nu au fost. Dacă faci o înălțime mică a, respectiv, reduce fontul.

Nu este recomandat să facă prea puțin text și o distanță mică între linii. Deoarece nici unul dintre utilizatori nu va fi capabil să-l citesc pe toate cu calm. El ochii repede obosit. Motoarele de căutare spun, de asemenea, că textul este user-friendly.

Mai mult decât atât, în ultimii ani, există un puternic accent pe gradul de utilizare pentru utilizatorii mobili. recomandări au spus întotdeauna că dimensiunea fontului ar trebui să fie normal, nu mici. Mai ales puternic afectează referința. Cu dimensiunea lor mici, utilizatorul va fi dificil de utilizat site-ul de navigare.

În motorul de căutare „Google“ este un instrument special care ajută în analiză. Este foarte convenabil pentru webmasteri.

Aici este un exemplu al rezultatelor care pot fi.

Se recomandă să se utilizeze aceste sfaturi, deoarece aceste criterii afectează rezultatele căutării.