Destul de des, designerii de layout începători au probleme în a stăpâni Foile de stil în cascadă (CSS). Nicio excepție nu este lucrul cu spațierea liniilor în CSS. Distanța dintre linii este distanța verticală dintre linii. La fel ca într-un document Microsoft Word obișnuit, acest parametru poate fi modificat și în textul unui fișier html.
Utilizarea înălțimii liniei la schimbarea spațierii
Prima și cea mai corectă modalitate de a rezolva problema cu spațierea este să setați valoarea proprietății line-height. Valoarea implicită a acestei proprietăți este normală (line-height: normal;). Spația dintre rânduri este calculată automat de browserul de internet însuși și depinde, în special, de tipul fontului, precum și de dimensiunea acestuia. Orice valoare numerică pozitivă care va fi setată în proprietatea stilului line-height va fi interpretată de browser ca un număr cu care trebuie înmulțită dimensiunea curentă a fontului.
În CSS, distanța dintre linii poate fi specificată în diferite unități de lungime: puncte (pt), inci (in), pixeli (px) și procente (%). Procentul este relativ la fontul curent și este implicit la 100%. Nu uitați că proprietatea line-height împrumută valoarea proprietății moștenire din elementul părinte.
Iată câteva exemple despre cum să măriți spația dintre linii în CSS:
Procesul de lucru cu spațierea liniilor este destul de simplu. Ar trebui să aveți cunoștințe de bază despre CSS și abilitatea de a include un fișier în pagina principală html. De asemenea, stilurile pot fi setate direct pe pagina html:
Pentru a face o spațiere și jumătate în această propoziție, trebuie să adăugați următorul cod în fișierul CSS:
înălțimea liniei: 1,5;
Pentru a face o spațiere dublă, puteți scrie următorul cod:
înălțimea liniei: 200%
În ambele cazuri, browserul va înțelege că fontul curent trebuie înmulțit cu 2. Această valoare va fi spațierea între rânduri.
Acum să dăm un exemplu despre cum să reduceți spația dintre linii (CSS):
Este important să rețineți că o valoare negativă a înălțimii liniei pur și simplu nu este percepută, deci valoarea sa minimă poate fi 0. Pentru a obține o jumătate de spațiere, trebuie să scrieți următorul cod:
înălțimea liniei: 0,5;
înălțimea liniei: 50%
înălțimea liniei: 0,5 pt
Toate cele 3 opțiuni sunt corecte și respectă toate standardele W3C, așa că vor funcționa în orice versiune de browser.
Utilizarea căptușelii atunci când se schimbă spațierea
Cu toate acestea, pe lângă schimbarea proprietății de înălțime a liniilor, există o altă modalitate de a schimba spația dintre linii în CSS, și anume să se „joace” cu valorile proprietății de umplutură. Proprietatea stil de umplutură este responsabilă pentru umplutura internă în orice obiect html. În mod implicit, această proprietate este 0. Selectând valori diferite, puteți modifica distanța dintre linii, de exemplu:
Lucrul cu spațierea liniilor este foarte ușor. Este suficient să cunoști elementele de bază ale CSS și să poți conecta fișierul la pagina principală html. De asemenea, poate fi setat direct pe pagina cu extensia html.
Pentru a mări distanța dintre linii, creșteți valoarea proprietății:
Astfel, distanța dintre liniile din paragraful nostru va fi mărită cu 10 pixeli față de cea inițială. Cu același succes, puteți, de asemenea, să reduceți distanța dintre rânduri scriind, de exemplu:
Spațiere negativă între rânduri
Dacă observați, de asemenea, nu este permisă introducerea unor valori negative, pentru ca șirurile să nu se suprapună. Spația dintre rânduri nu poate fi negativă în CSS. Din punct de vedere al codării și al standardelor W3C, nu puteți scrie niciodată valori negative în valorile de spațiere între rânduri.
Schimbați spația dintre rânduri în liste
Uneori există o sarcină de a schimba spația dintre linii în liste
- și
- Paragraful 1
- Punctul 2
- Punctul 3
- paragraf
- liste;
- ;
- Mese;
- titluri
- și orice altceva unde plasați text.
- pixeli;
- inci;
- puncte;
- interes;
- și altele care sunt folosite în CSS.
- Înălțimea elementelor din listă.
- Indentări pentru text în stânga.
- Indentări pentru liniile de deasupra și de dedesubt.
- Lățimea maximă a fiecărui articol.
- . Metodele anterioare nu vor duce la rezultatul dorit, cu toate acestea, există o proprietate care poate modifica spațierea din listă - această proprietate - marjă. Această proprietate de stil poate fi fie pozitivă, fie negativă. Să arătăm modificarea spațierii dintre linii din listă folosind un exemplu:
Pentru a mări indentarea, trebuie să scrieți următoarele rânduri în fișierul CSS:
margine-sus: 10px;
Astfel, am indicat că distanța față de fiecare element din listă crește cu 10 pixeli. Si in acest caz este posibilă și o valoare negativă. Deci putem seta: - margin-top: -15px.
CSS este foarte necesar pentru stilul textului. Orice specialist le folosește întotdeauna dacă creează un site frumos. Datorită acestor atribute, puteți efectua orice operațiuni cu text.
De regulă, majoritatea designerilor de layout nu le place aspectul implicit al textului în html. Spația dintre linii CSS vă permite să personalizați aproape orice poate fi imaginat. Și dacă mergi mai adânc, poți face ceva la care nici măcar nu te-ai gândit.
Cum se face spațierea între liniile de text în CSS
Este important să înțelegeți că puteți seta dimensiunile liniilor, indentările și așa mai departe pentru toate elementele în care există text. De exemplu, toate aceste atribute sunt excelente pentru:
Când ne uităm la spațierea dintre linii CSS, primele lucruri de luat în considerare sunt următoarele atribute.
În Photoshop, există conceptul de Leading. Nu există un astfel de atribut în CSS, dar datorită acestuia puteți explica esența. De fapt, de conducere este distanța dintre linii.
În CSS, dimensiunea unei linii este dată de parametrii line-height și font-size. După cum puteți vedea, figura arată clar că dimensiunea fontului este dimensiunea fontului. Nici o singură literă nu depășește aceste limite.
Înălțimea liniei este distanța de la mijlocul conducerii de sus până la mijlocul conducerii de jos. Toate acestea sunt indicate prin săgeți din figură.
Vă rugăm să rețineți că, dacă specificați o înălțime a liniei mai mică decât dimensiunea fontului, atunci liniile se vor întâlni una cu cealaltă. Asigurați-vă că urmăriți acest lucru, astfel încât acest lucru să nu se întâmple.
Unii oameni se întreabă de ce dimensiunea fontului este întinsă mai jos decât linia cu litere. Totul este simplu. La urma urmei, există litere care sunt mai jos decât nivelul principal al liniei. Mai jos în figură - un exemplu bun, în care sunt folosite caractere, întinse în sus și în jos.
După cum puteți vedea, literele ocupă doar întregul interval de dimensiuni ale fontului. Și înălțimea liniei este mai mare și se adaugă spațiu egal pe ambele părți.
Valoarea atributului line-height poate fi orice:
Nu puteți specifica o valoare negativă. De exemplu, dacă specificați un multiplicator egal cu unu și jumătate, atunci veți obține spațierea standard de unu și jumătate în text.
Dacă specificați în procente, atunci rețineți că 100% în înălțimea liniei este echivalent cu valoarea mărimii fontului.
În plus, puteți specifica valoarea normală sau moștenire. Dacă specificați normal, atunci distanța dintre linii va fi calculată automat de browser, la discreția acestuia. Valoarea poate varia în funcție de browser. Este recomandat să setați un anumit număr, astfel încât toți utilizatorii să aibă același număr.
Moștenire înseamnă că valoarea va fi exact aceeași cu elementul părinte.
Design mai detaliat
Spațierea dintre linii CSS nu este într-adevăr limitată doar la atributele de mai sus. Distanța este, de asemenea, ajustată de atributele de marjă și de umplutură. Dacă specificați atributul exact ca margin="5px", atunci o distanță de 5 pixeli va fi adăugată pe toate părțile liniei (paragraf).
Dacă trebuie doar să specificați deasupra unui paragraf, atunci margin-top poate fi specificat. Traducerea este foarte simplă. Astfel, va fi posibilă setarea indentărilor pe fiecare parte.
Rețineți că există și un atribut de umplutură. Funcționează exact la fel ca marginea. Puteți seta atât o indentație generală, cât și o direcție specifică (stânga, dreapta, sus, jos).
Privește cu atenție poza de mai sus. Marja este marginea din afara obiectului, iar umplutura este în interior.
Aceste atribute sunt globale. Ele pot fi aplicate la orice - imagini, tabele, text, link-uri și așa mai departe.
Amintește-ți asta o dată pentru totdeauna. Acesta este un punct foarte important în proiectarea obiectelor. De exemplu, datorită marginii, puteți specifica indentările dintre text și imaginile din interiorul acesteia. Dacă aceste indentări nu sunt prezente, atunci textul va fi plasat aproape de imagine.
Dacă aveți text într-un tabel, atunci utilizați umplutură pentru a împiedica textul să se lipească de marginile tabelului, deoarece arată urât. Și dacă setați indentarea la cel puțin 5 pixeli, va arăta deja mult mai bine. Pe lângă înălțime, linia are un atribut de lățime.
Uneori, aceasta este o proprietate foarte utilă. Figura de mai jos prezintă un exemplu de diferite lățimi de text.
Exemplu de design
Când creați un design de site web, ar trebui să vă asigurați întotdeauna că textul este cât mai lizibil posibil. Dacă utilizatorului îi este dificil să citească textul (este prea mic sau prea mare), atunci el va închide pur și simplu site-ul tău.
Încercați să comparați cele două paragrafe prezentate în figura de mai jos. Ce text preferi sa citesti?
Spațierea între rânduri CSS este concepută pentru a face textul mai ușor de citit. De asemenea, rețineți că diferitele fonturi pot diferi în ceea ce privește înălțimea lor inițială.
Pentru claritate, puteți verifica în orice editor. Să comparăm câteva fonturi.
Vă rugăm să rețineți că toate fonturile sunt scrise în 24 de pixeli. După cum puteți vedea, toate diferă în înălțimea și lățimea literelor. Dacă comparați dimensiuni mai mari, diferența va fi mai evidentă.
CSS: spațiere între rânduri într-o listă
Setarea de spațiere se aplică și listelor. În plus, stilurile de liste sunt caracterizate de marginea și umplutura descrise mai sus. Datorită acestui fapt, listele devin mai frumoase decât cele standard. Folosind toate aceste atribute, puteți seta:
Concluzie
Deținând un astfel de set de atribute, vă puteți juca nu numai cu designul liniilor, ci și cu tot ceea ce doriți. Aceștia sunt parametri globali cărora se supun absolut toate elementele (excepția este dimensiunea fontului, deoarece este doar pentru text).
Dacă ați început relativ recent să lucrați cu editorul de text Word, atunci este posibil să nu știți cum se modifică formatarea tuturor aspectelor în acesta. În acest articol, vom vorbi doar despre unul dintre ele - vă vom spune cum să reduceți spațiul dintre linii în Word. De acord, pentru că toată lumea vrea ca documentul pe care l-a scris să arate frumos atunci când este tipărit, iar astfel de artefacte nu fac decât să distrugă această frumusețe. Prin urmare, citește articolul până la sfârșit pentru a ști cum să le faci față.
paragrafe suplimentare
Înainte de a reduce spațiul dintre rânduri în Word, este recomandat să vă ocupați inițial de paragrafe. În sensul că uneori utilizatorul poate pune mai multe în loc de un paragraf. Aceste acțiuni sunt cele care duc la faptul că există un spațiu gol mare între linii.
Pentru a reduce timpul de căutare a acestor nuanțe, puteți utiliza vizualizarea.Această funcție este activată făcând clic pe pictograma situată pe bara de instrumente. Acesta se află în fila „Acasă” și este indicat de pictograma „¶”. Făcând clic pe el, puteți vedea tot paragraful în acest caz, acesta fiind afișat și cu simbolul „¶”.
Acum trebuie doar să găsiți paragrafele suplimentare și să le ștergeți. Aceasta a fost prima cale, dar nu ultima, așa că să trecem la a doua.
Problemă de spațiere
Următorul mod de a-l micșora este să schimbați stilul la Fără spațiere. Cu toate acestea, această metodă este recomandată a fi utilizată numai dacă decalajul este foarte mare și pronunțat. Faptul este că această metodă poate schimba radical toată formatarea documentului dvs., stricând astfel munca.
Deci, pentru a elimina intervalele mari dintre linii, trebuie să mergeți la fila „Acasă” și acolo găsiți o secțiune numită „Stiluri”. În el, trebuie să selectați stilul „Fără intervale”. Dacă nu este pe panou, extindeți secțiunea cu butonul corespunzător.
Dacă aveți cea mai recentă versiune de Word, atunci aceste manipulări trebuie făcute în fila Design, în secțiunea Formatare document. Instrumentul se numește Paragraph Spacing.
Efectuăm o configurare completă: deschideți „Paragraf”
Până acum, am luat în considerare modalități care nu dau completitudine acțiunilor, acestea ar putea schimba doar o anumită formatare în scurt timp. Dar dacă doriți să eliminați spațiul dintre linii fără a deteriora întregul document, atunci cel mai bine este să utilizați setarea completă. Chiar acum vom vorbi despre cum să reduceți spațiul dintre linii în Word recurgând la setări flexibile de formatare.
Mai întâi trebuie să selectați zona textului pe care urmează să o modificați. După aceea, accesați fila „Acasă”, iar în ea, în secțiunea „Paragraf”, faceți clic pe pictograma cu o săgeată care indică colțul din dreapta jos. Pictograma în sine este situată în colțul din dreapta jos al secțiunii.
Efectuăm o configurație completă: setați valoarea
Imediat ce faci acest lucru, fereastra de setări „Paragraf” va apărea în fața ta. În ea, acordați imediat atenție secțiunii „Interval”. În ea sunt efectuate toate setările de care avem nevoie. Puteți modifica distanța dintre paragrafe și între liniile paragrafului însuși. Pentru a face primul, folosiți contorul de lângă cuvintele „Înainte:” și „După:”.
În cazul în care doriți să eliminați complet intervalul, puneți „0”. Dacă doriți să eliminați distanța dintre linii, atunci utilizați lista derulantă din dreapta. Puteți utiliza presetări (single, 1,5 linii, dublu, min, exact și multiplicator) sau puteți introduce o valoare manual în câmpul „valoare:”.
Așa că ați trecut, ca să spunem așa, în instruirea Word despre cum să reduceți distanța dintre linii.
Proprietate inaltimea liniei stabilește distanța dintre liniile de text (spațiere între linii). Proprietatea nu stabilește spațiul dintre liniile de text, așa cum ar părea, se stabilește înălțimea liniei de text. Aceasta înseamnă că distanța reală dintre linii va fi calculată astfel: inaltimea liniei - marimea fontului= spațierea dintre liniile de text. Sau vice versa inaltimea liniei = marimea fontului+ spațiere între rândurile de text.
Proprietate inaltimea liniei folosit uneori într-un mod nestandard pentru a centra textul în înălțime.
Sintaxă
Selector (înălțimea liniei: unități CSS | procente | multiplicator | normal | moștenire; )
Valori
În mod implicit, browserul alege automat spațierea dintre linii ( normal).
Exemple
Exemplu
inaltimea liniei - marimea fontului= 35px - 13px = 21px:
P (dimensiunea fontului: 13px; înălțimea liniei: 35px; )
Rezultatul executării codului:
Exemplu
Reduceți decalajul la 21px - 13px = 7px:
P (dimensiunea fontului: 13px; înălțimea liniei: 21px; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
În acest exemplu, distanța dintre liniile de text va fi inaltimea liniei - marimea fontului = 13px - 13px = 0px- liniile se vor lipi practic împreună (cozile literelor liniei superioare vor atinge cozile literelor celei inferioare):
P (dimensiunea fontului: 13px; înălțimea liniei: 13px; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
În acest exemplu, valoarea inaltimea liniei- multiplicator 1,5 al mărimii fontului. Prin urmare inaltimea liniei va fi echivalent marimea fontului * 1.5 = 13px * 1.5 = 20px. Și spațiul real dintre linii va fi inaltimea liniei - marimea fontului = 20px - 13px = 7px:
P (dimensiunea fontului: 13px; înălțimea liniei: 1,5; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
Să creștem multiplicatorul:
P (dimensiunea fontului: 13px; înălțimea liniei: 2,5; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
Dacă este făcută inaltimea liniei Mai puțin marimea fontului, atunci liniile se vor suprapune, în general:
P (dimensiunea fontului: 13px; înălțimea liniei: 9px; )
Rezultatul executării codului.
Proprietate inaltimea liniei stabilește distanța dintre liniile de text (spațiere între linii). Proprietatea nu stabilește spațiul dintre liniile de text, așa cum ar părea, se stabilește înălțimea liniei de text. Aceasta înseamnă că distanța reală dintre linii va fi calculată astfel: inaltimea liniei - marimea fontului= spațierea dintre liniile de text. Sau vice versa inaltimea liniei = marimea fontului+ spațiere între rândurile de text.
Proprietate inaltimea liniei folosit uneori într-un mod nestandard pentru a centra textul în înălțime.
Sintaxă
Selector (înălțimea liniei: unități CSS | procente | multiplicator | normal | moștenire; )
Valori
În mod implicit, browserul alege automat spațierea dintre linii ( normal).
Exemple
Exemplu
inaltimea liniei - marimea fontului= 35px - 13px = 21px:
P (dimensiunea fontului: 13px; înălțimea liniei: 35px; )
Rezultatul executării codului:
Exemplu
Reduceți decalajul la 21px - 13px = 7px:
P (dimensiunea fontului: 13px; înălțimea liniei: 21px; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
În acest exemplu, distanța dintre liniile de text va fi inaltimea liniei - marimea fontului = 13px - 13px = 0px- liniile se vor lipi practic împreună (cozile literelor liniei superioare vor atinge cozile literelor celei inferioare):
P (dimensiunea fontului: 13px; înălțimea liniei: 13px; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
În acest exemplu, valoarea inaltimea liniei- multiplicator 1,5 al mărimii fontului. Prin urmare inaltimea liniei va fi echivalent marimea fontului * 1.5 = 13px * 1.5 = 20px. Și spațiul real dintre linii va fi inaltimea liniei - marimea fontului = 20px - 13px = 7px:
P (dimensiunea fontului: 13px; înălțimea liniei: 1,5; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
Să creștem multiplicatorul:
P (dimensiunea fontului: 13px; înălțimea liniei: 2,5; )
Rezultatul executării codului:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Exemplu
Dacă este făcută inaltimea liniei Mai puțin marimea fontului, atunci liniile se vor suprapune, în general:
P (dimensiunea fontului: 13px; înălțimea liniei: 9px; )
Rezultatul executării codului.
