Hapësira midis rreshtave në html. Cilësimet e CSS: Hapësira e rreshtave

Prona vija e gjatesise vendos hapësirën midis rreshtave të tekstit (ndarja e rreshtave). Vetia nuk e cakton hapësirën midis rreshtave të tekstit siç mund të duket, ajo vendos lartësia e rreshtit të tekstit. Kjo do të thotë se hapësira aktuale midis rreshtave do të llogaritet si kjo: vija e gjatesise - përmasa e germave= distanca midis rreshtave të tekstit. Ose anasjelltas vija e gjatesise = përmasa e germave+ distanca midis rreshtave të tekstit.

Prona vija e gjatesise ndonjëherë përdoret në një mënyrë jo standarde për të përqendruar tekstin në lartësi.

Sintaksë

Zgjedhësi (lartësia e rreshtit: njësitë CSS | përqindje | shumëzues | normal | trashëgim; )

vlerat

Si parazgjedhje, shfletuesi zgjedh automatikisht ndarjen e rreshtave ( normale).

Shembuj

Shembull

vija e gjatesise - përmasa e germave= 35px - 13px = 21px:

P (madhësia e shkronjave: 13 px; lartësia e rreshtit: 35 px; )

Rezultati i ekzekutimit të kodit:

Shembull

Le të zvogëlojmë hendekun në 21 px - 13 px = 7 px:

P (madhësia e shkronjave: 13 px; lartësia e rreshtit: 21 px; )

Rezultati i ekzekutimit të kodit:

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.

Shembull

Në këtë shembull, distanca midis rreshtave të tekstit do të jetë vija e gjatesise - përmasa e germave = 13 px - 13 px = 0 px- vijat pothuajse do të ngjiten së bashku (bishtat e shkronjave të vijës së sipërme do të prekin bishtat e shkronjave të poshtme):

P (madhësia e shkronjave: 13 px; lartësia e rreshtit: 13 px; )

Rezultati i ekzekutimit të kodit:

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.

Shembull

Në këtë shembull vlera vija e gjatesise- shumëzues 1.5 nga madhësia e shkronjave. Prandaj vija e gjatesise do të jetë ekuivalente përmasa e germave * 1.5 = 13 px * 1.5 = 20 px. Dhe hapësira reale midis rreshtave do të jetë vija e gjatesise - përmasa e germave = 20 px - 13 px = 7 px:

P (madhësia e shkronjave: 13 px; lartësia e rreshtit: 1,5; )

Rezultati i ekzekutimit të kodit:

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.

Shembull

Le të rrisim shumëzuesin:

P (madhësia e shkronjave: 13 px; lartësia e rreshtit: 2,5; )

Rezultati i ekzekutimit të kodit:

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.

Shembull

Nëse ju bëni vija e gjatesise më pak përmasa e germave, atëherë linjat në përgjithësi do të mbivendosen njëra-tjetrën:

P (madhësia e shkronjave: 13 px; lartësia e rreshtit: 9 px; )

Rezultati i ekzekutimit të kodit.

Trajtimi i hapësirave midis shkronjave dhe fjalëve

1. Largësia ndërmjet fjalëve ndërmjet fjalëve

Vendos hapësirën midis fjalëve. Mund të përdoren vlera pozitive dhe negative. Me një kuptim negativ, fjalët mund të mbivendosen njëra-tjetrën.

Vlera e ndarjes së fjalëve ndikohet nga vlera e veçorisë text-align në rastin e tekstit të justifikuar. I trashëguar.

Sintaksë

P (hapësira ndërmjet fjalëve: normale;) p (hapësira ndërmjet fjalëve: 2 px;)
Oriz. 1. Hapësira ndërmjet fjalëve

2. Hapësira e shkronjave

Vetia cakton distancën midis shkronjave (sasia e përcjelljes) dhe simboleve. Mund të marrë vlera pozitive dhe negative. Është e këshillueshme që të përdoret për të rritur ekspresivitetin dhe lexueshmërinë e titujve, përkufizimeve, etj. Të trashëguara.

Sintaksë

P (hapësira midis shkronjave: normale;) p (hapësira midis shkronjave: 2 px;)
Oriz. 2. Ndryshimi i distancës ndërmjet shkronjave duke përdorur veçorinë e ndarjes së shkronjave

3. Trajtimi i hapësirave të hapësirës së bardhë

Vetia trajton hapësirat midis fjalëve dhe ndërprerjeve të rreshtave brenda një elementi. E pa trashëguar.

Sintaksë

P (hapësirë ​​e bardhë: normale;) p (hapësirë ​​e bardhë: tanirap;) p (hapësirë ​​e bardhë: para;) p (hapësirë ​​e bardhë: para-mbështjellje;) p (hapësirë ​​e bardhë: vija paraprake;)

4. Vendosja e madhësisë së skedës

Për të ndryshuar sasinë e dhëmbëzimit të marrë duke përdorur tastin TAB, përdorni veçorinë tab-size. Vlerat e vetive shpërfillen kur vetia e hapësirës së bardhë vendoset në një nga tre vlerat para-line, normale ose tani.

Punon vetëm për elementë Dhe <pre>Për elementët e tjerë të bllokut, vlera do të jetë gjithmonë e barabartë me një. Vlerat e vetive të specifikuara në njësitë e gjatësisë mbështeten vetëm në Chrome 42+.</p> <p><b>Sintaksë</b></p><p>Pre (-moz-tab-size: 16;) /* Firefox */ pre (-o-tab-size: 16;) /* Opera 10.6-12.1 */ pre (madhësia e skedës: 16;)</p> <p>Shumë shpesh, dizajnerët fillestarë të paraqitjes kanë probleme në zotërimin e fletëve të stilit Cascading (CSS). Puna me ndarjen e rreshtave në CSS nuk është përjashtim. Hapësira e vijës është distanca vertikale ndërmjet vijave. Ashtu si në një dokument të rregullt Microsoft Word, këtë parametër mund ta ndryshoni edhe në tekstin e një skedari html.</p><h2>Përdorimi i lartësisë së vijës kur ndryshon hapësirën</h2><p>Opsioni i parë dhe më i saktë për zgjidhjen e problemit me intervale do të ishte vendosja e një vlere për vetinë line-height. Vlera e paracaktuar e kësaj vetie është normale (lartësia e vijës: normale;). Hapësira e rreshtave llogaritet automatikisht nga vetë shfletuesi i Internetit dhe varet, veçanërisht, nga lloji i fontit, si dhe nga madhësia e tij. Çdo vlerë numerike pozitive që specifikohet në veçorinë e stilit të lartësisë së vijës do të interpretohet nga shfletuesi si një numër me të cilin do të shumëzohet madhësia aktuale e shkronjave.</p><p>Në CSS, hapësira e rreshtave mund të specifikohet në njësi të ndryshme gjatësie: pika (pt), inç (in), pikselë (px) dhe përqindje (%). Përqindja llogaritet në lidhje me fontin aktual dhe paracaktohet në 100%. Mos harroni se vetia line-height merr hua vlerën e vetive trashëguese nga elementi i saj mëmë.</p><p>Këtu janë disa shembuj se si të rritet hapësira e rreshtave në CSS: <p>Procesi i punës me ndarjen e rreshtave është mjaft i thjeshtë. Ju duhet të keni njohuri bazë të CSS dhe aftësinë për të lidhur një skedar me faqen kryesore html. Stilet gjithashtu mund të vendosen direkt në faqen html:</p></p><p>Për të krijuar një hapësirë ​​e gjysmë në këtë fjali, duhet të shtoni kodin e mëposhtëm në skedarin CSS:</p><p>lartësia e vijës: 1,5;</p><p>Për të bërë ndarje të dyfishtë, mund të shkruani kodin e mëposhtëm:</p><p>lartësia e vijës: 200%;</p><p>Në të dyja rastet, shfletuesi do të kuptojë se fonti aktual duhet të shumëzohet me 2. Kjo vlerë do të jetë ndarja e rreshtave.</p><p><img src='https://i2.wp.com/syl.ru/misc/i/ai/230259/1120514.jpg' width="100%" loading=lazy loading=lazy></p><p>Tani këtu është një shembull se si të zvogëloni hapësirën e rreshtave (CSS):</p><p>Është e rëndësishme të mbani mend se një vlerë negative e lartësisë së vijës thjesht nuk perceptohet, kështu që vlera minimale e saj mund të jetë 0. Për të marrë një gjysmë interval, duhet të shkruani kodin e mëposhtëm:</p><p>lartësia e vijës: 0,5;</p><p>lartësia e vijës: 50%;</p><p>lartësia e vijës: 0,5 pt;</p><p>Të 3 opsionet janë të sakta dhe përputhen me të gjitha standardet e W3C, kështu që ato do të funksionojnë në çdo version të shfletuesit.</p><h2>Përdorimi i mbushjes kur ndryshon hapësirën</h2><p>Sidoqoftë, përveç ndryshimit të veçorisë së lartësisë së linjës, ekziston një mënyrë tjetër për të ndryshuar ndarjen e rreshtave në CSS, kjo është të "luani" me vlerat e vetive të mbushjes. Vetia e stilit të mbushjes është përgjegjëse për mbushjen e brendshme në çdo objekt html. Si parazgjedhje, kjo veti është 0. Duke zgjedhur vlera të ndryshme, mund të ndryshoni ndarjen e rreshtave, për shembull: <p>Puna me ndarjen e rreshtave është shumë e thjeshtë. Mjafton të njihni bazat e CSS dhe të jeni në gjendje të lidhni skedarin me faqen kryesore html. Mund të vendoset gjithashtu direkt në faqe me shtesën html.</p></p><p><img src='https://i0.wp.com/syl.ru/misc/i/ai/230259/1120513.jpg' width="100%" loading=lazy loading=lazy></p><p>Për të rritur ndarjen e vijës, rrisni vlerën e pronës:</p><p>Kështu, distanca midis rreshtave në paragrafin tonë do të rritet me 10 piksel në krahasim me atë fillestar. Me të njëjtin sukses, ju mund të zvogëloni ndarjen e rreshtave duke shkruar, për shembull:</p><h2>Hapësira negative e vijave</h2><p>Nëse e keni vënë re, gjithashtu nuk ju lejon të vendosni vlera negative, kështu që nuk përfundoni me rreshta që mbivendosen me njëri-tjetrin. Në CSS, ndarja e rreshtave nuk mund të jetë negative. Nga pikëpamja e kodimit dhe standardeve W3C, nuk mund të shkruani kurrë vlera negative në vlerat e ndarjes së rreshtave.</p><h2>Ndryshimi i ndarjes së rreshtave në lista</h2><p>Ndonjëherë lind detyra e ndryshimit të ndarjes së rreshtave në lista <ul>Dhe <ol>. Metodat e mëparshme nuk do të çojnë në rezultatin e dëshiruar, megjithatë, ekziston një pronë që mund të ndryshojë hapësirën në listë - kjo është vetia e diferencës. Kjo pronë e stilit mund të ketë një vlerë pozitive ose negative. Le të tregojmë ndryshimin në ndarjen e rreshtave në listë duke përdorur një shembull:</p><p><li>Paragrafi 1</li></p><p><li>Pika 2</li></p><p><li>Pika 3</li></p><p>Për të rritur dhëmbëzimin, duhet të shkruani rreshtat e mëposhtëm në skedarin CSS:</p><p>margin-lart: 10px;</p><p>Kështu, ne treguam se distanca nga çdo artikull i listës rritet me 10 piksele. Për më tepër, në këtë rast një vlerë negative është gjithashtu e mundur. Pra, mund të vendosim: - margin-top: -15px.</p> <p>Vetia margin HTML përdoret për të shtuar një diferencë ose hendek midis elementeve të ndryshëm. Vetia e mbushjes përdoret për të shtuar hapësirë ​​midis përmbajtjes dhe kufirit (kornizës) të elementit të specifikuar HTML.</p> <p>Dallimi midis margjinës dhe mbushjes mund të shihet në imazhin e mëposhtëm:</p> <p>Shikoni gjithashtu demonstrimin për të kuptuar më mirë ndryshimin midis këtyre dy vetive.</p> <p>Shikoni demonstrimin dhe kodin</p> <p>Kemi tre elemente div. Dy të parat janë me veçorinë HTML margin, dhe e treta është me vetinë padding. Hapësira ndërmjet elementeve div është margjina, dhe hapësira ndërmjet tekstit brenda div-së së tretë dhe vijës së saj kufitare është e mbushur.</p> <h2>Mbushja CSS dhe sintaksa e margjinës</h2> <p>Sintaksa e përdorur për të deklaruar një pronë të vetme të marzhit CSS është:</p> <p>Ky kod vendos mbushjen në të gjitha drejtimet: lart, poshtë, majtas dhe djathtas. Nëse keni nevojë të vendosni mbushjen për drejtime të ndryshme, mund ta bëni këtë duke përdorur deklaratën e mëposhtme të stenografisë:</p> <p>margjina: 10px 20px 50px 100px;</p> <ul><li>10px - mbushje e sipërme;</li> <li>20px - mbushja e djathtë;</li> <li>30 px - mbushje e poshtme;</li> <li>40 px - mbushje majtas.</li> </ul><p>Ju gjithashtu mund të vendosni veçmas HTML-në e majtë të margjinës dhe udhëzime të tjera:</p> <p>Shënim: Mund të përdoret për të përcaktuar dhëmbëzimin px, pts, cm, etj.</p> <h3>Sintaksa e vetive të mbushjes së CSS</h3> <p>Vetia e mbushjes mund të vendoset duke përdorur një deklaratë të vetme/shkurtuar ose duke përdorur një deklaratë të veçantë për çdo drejtim.</p> <p>Deklaratë e vetme me një kuptim:</p> <p>Për çdo drejtim me një reklamë të vetme:</p> <p>mbushje: 10px 20px 50px 100px;</p> <p>Nëse specifikohen katër vlera, rendi i tyre është i njëjtë si për vetinë e marzhit HTML CSS.</p> <p>Për secilin drejtim veç e veç:</p> <p>padding-top: 10px; mbushje-djathtas: 20px; mbushje-fund: 30px; mbushje-majtas: 40px;</p> <h3>Shembull për vendosjen e margjinave dhe indenteve në një listë HTML</h3> <p>Në hyrje, tregova vetitë e marzhit dhe të mbushjes së përdorur në elementin div. Në këtë demonstrim, unë krijova një listë duke përdorur artikujt e menysë që janë lidhje. Lista vendoset brenda një elementi div. Ai përmban artikuj të menusë në formën e hiperlidhjeve.</p> <p>Lista përcaktohet nga vetitë e tjera CSS, por pa përdorur margjinën HTML dhe vetitë e mbushjes do të duket kështu:</p> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/without-padding-mar-031114.png' height="136" width="200" loading=lazy loading=lazy></p> <p>Shikoni demonstrimin dhe kodin</p> <p>Duke shtuar margjina 10 px për lidhjet brenda <ul>:</p> <p>do të marrim pamjen e mëposhtme:</p> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/3-css-padding-031115.png' height="211" width="203" loading=lazy loading=lazy></p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/4-css-margin-031116.png' height="228" width="208" loading=lazy loading=lazy></p> <p>Shikoni demonstrimin dhe kodin në internet</p> <p>E gjithë klasa për lidhjet brenda një elementi <ul>do të jetë si më poshtë:</p> <p>mbushje: 10 px; diferenca: 2 px; tekst-dekorim: asnjë; ngjyra: #fff; ngjyra e sfondit: #DA8119; shfaqja:blloku;</p> <h3>Demonstrimi i fushave duke përdorur një shembull të një tabele HTML</h3> <p>Më poshtë është një shembull i përdorimit të vetive padding në një tabelë HTML. Unë kam krijuar një tabelë me disa rreshta.</p> <p>Tabela është stiluar duke përdorur veti të ndryshme CSS. Së pari, shikoni se si duket tabela pa aplikuar veçorinë e mbushjes:</p> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/5-css-table-padding-031124.png' width="100%" loading=lazy loading=lazy></p> <p>Shikoni demonstrimin dhe kodin</p> <p>Duke shtuar fusha, marrim një tabelë që duket si kjo:</p> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/table-with-padding-031125.png' width="100%" loading=lazy loading=lazy></p> <p>Shikoni demonstrimin dhe kodin</p> <p>Më poshtë është kodi për stilet që përdoren për . I gjithë kodi mund të shihet duke ndjekur lidhjen e mësipërme:</p> <p>mbushje: 20 px; kufiri: i ndërprerë 1px #DF7000; sfond: #D0E8AC; ngjyra: #000;</p> <h3>Një shembull i përdorimit të margjinave dhe mbushjes me elementin e formës</h3> <p>Vetitë e mbushjes së margjinës HTML mund të aplikohen gjithashtu për elementët e formimit: fushat e tekstit, butonat, etj.</p> <p>Vetia e mbushjes, kur aplikohet në një kuti teksti, specifikon hapësirën midis kursorit brenda kutisë së tekstit dhe kufirit të tij. margin shton mbushje midis fushave të ndryshme të tekstit ose elementëve të tjerë të formës.</p> <p>Për ta bërë më të qartë, do të krijoj një formular dhe do të tregoj ndryshimin midis fushave duke përdorur veçoritë e marzhit dhe mbushjes dhe pa. Pamja fillestare e formularit pa aplikuar veçoritë e marzhit dhe të mbushjes:</p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/padding-form-without-031122.png' height="201" width="242" loading=lazy loading=lazy></p> <p>Duke shtuar fusha në klasën e textbox dhe klasën e butonit btn, ne përfundojmë me një formë që duket si kjo:</p> <p>Margjinat për fushat e tekstit:</p> <p>Fushat e butonave:</p> <p>mbushje: 9px 15px;</p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/8-css-padding-form-031121.png' height="239" width="247" loading=lazy loading=lazy></p> <p>Shikoni demonstrimin dhe kodin</p> <p>Për të rritur ose ulur kufijtë midis fushave të tekstit, përdorni veçorinë e marzhit HTML CSS. Në këtë demonstrim, kam përdorur një vlerë negative për të zvogëluar distancën midis fushave.</p> <p>Fushat e formularit do të duken kështu:</p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/9-css-margin-form-031117.png' height="212" width="245" loading=lazy loading=lazy></p> <p>Shikoni demonstrimin dhe kodin</p> <p>Pas përdorimit të një vlere negative në kufirin HTML, distanca midis fushave të tekstit u ul me 3 piksel.</p> <p>Duke përdorur veçorinë padding, ne rritëm distancën midis kursorit brenda fushës së tekstit dhe vijës kufitare, e cila përcaktohet nga vetitë e tjera. Tani fusha duket shumë më mirë.</p> <p>Për butonin “ <span>Ruaj</span>” ne aplikuam gjithashtu veçorinë e mbushjes:</p> <p>mbushje: 9px 15px;</p> <p>i cili përdoret për të rreshtuar tekstin në të gjitha drejtimet.</p> <p>Përkthimi i artikullit " <span>Mbushja dhe diferenca CSS – Shpjegohet me 4 elementë HTML</span>» u përgatit nga ekipi miqësor i projektit</p> <p>Në CSS, vendosja e ndarjes së rreshtave është shumë e lehtë. Ekziston një pronë e veçantë për këtë. Por, sigurisht, ka shumë parametra të tjerë që janë universalë dhe mund të aplikohen në tekst.</p><p>Nëse nuk bëhen cilësime, vendosen vlerat e paracaktuara. Nëse dëshironi, mund ta ndryshoni këtë distancë. Vlera mund të jetë ose një përqindje ose piksel.</p><h2>Lartësia e rreshtit</h2><p>Në CSS, distanca midis rreshtave mund të demonstrohet nga imazhi i mëposhtëm.</p><p>Imazhi i mësipërm tregon parametrat me distancat përkatëse. Teksti ndodhet në hapësirën e madhësisë së shkronjave. Ju lutemi vini re se rreshti i tekstit nuk fillon në bazë, por pak më lart. Hapësira më poshtë është dhënë për shkronjat që kanë elementë më poshtë (g, y, e kështu me radhë).</p><p>Vini re se hapësira midis blloqeve të madhësisë së shkronjave quhet kryesore. Kjo veti nuk shfaqet në HTML dhe CSS, por është e pranishme në redaktues të tjerë grafikë dhe tekstesh. Për shembull, në Adobe Photoshop.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1366115.jpg' height="229" width="252" loading=lazy loading=lazy></p><p>Figura e mësipërme tregon se ku mund të specifikoni drejtimin në Photoshop. Dhe pranë tij është parametri i madhësisë së shkronjave.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1366116.jpg' height="230" width="250" loading=lazy loading=lazy></p><h2>Shembuj të përdorimit të lartësisë së vijës</h2><p>Në CSS, distanca midis rreshtave mund të vendoset si përqindje. Një shembull ilustrues është dhënë më poshtë.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366117.jpg' width="100%" loading=lazy loading=lazy></p><p>Nëse vlera është e vogël, do të jetë e papërshtatshme që përdoruesi i faqes tuaj të lexojë.</p><p>Distanca mund të ndryshohet edhe nga madhësia e shkronjave. Nëse diferenca midis parametrave kryesorë është shumë e ndryshme në numër, atëherë ky ndryshim kompensohet duke rritur kryesimin.</p><h2>Hollësitë e dizajnit</h2><p>Në CSS, hapësira midis rreshtave mund të rregullohet më tej me mbushje të ndryshme. Le të shohim shembullin në figurë.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366118.jpg' height="276" width="330" loading=lazy loading=lazy></p><p>Në rastin tonë, fusha "Element" do të përmbajë tekst. Mbushja është mbushja brenda një objekti, dhe diferenca është mbushja pas objektit. Kufiri është një kornizë. Mund të jetë 0 piksel, ose mund të jetë 100.</p><p>Imazhi i mëposhtëm tregon të gjithë mbushjen, kufirin dhe lartësinë e rreshtit të tekstit në të njëjtën kohë.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366119.jpg' width="100%" loading=lazy loading=lazy></p><p>Nëse teksti juaj është i vogël, vetëm një rresht, ose secila rresht është në një paragraf të veçantë, atëherë distanca mund të rregullohet duke u futur midis këtyre paragrafëve. Kjo do të thotë, ndarja dhe mbushja midis rreshtave në një element nuk kanë asnjë efekt. Ata krijojnë dhëmbëzim vetëm përgjatë skajeve të objektit. Objekti është i gjithë paragrafi, jo rreshtat brenda tij. Është e rëndësishme të mos ngatërrohemi këtu.</p><p>Në rastet kur ka shumë rreshta, dhe e gjithë kjo ndodhet në një objekt, rekomandohet ndryshimi i fontit me parametrat kryesorë.</p><h2>Si të rritet hapësira midis linjave CSS</h2><p>Hapësira ndërmjet rreshtave HTML mund të specifikohet për çdo klasë ose për të gjithë paragrafët në tekst. Nëse e specifikoni kështu: p (lartësia e vijës:20px;), atëherë absolutisht të gjithë paragrafët në faqe do të kenë rreshta prej 20 pikselësh. Nëse keni nevojë për madhësi të ndryshme në vende të ndryshme, rekomandohet ta bëni këtë si më poshtë.</p><p>Ne shkruajmë stile.</p><p>Klasa 1 (lartësia e vijës: 20 px; )</p><p>Klasa 2 (lartësia e rreshtit: 16 px; )</p><p>Klasa 3 (lartësia e vijës: 12 px; )</p><p>Për qartësi, le të shtojmë një kornizë në mënyrë që të shihni se funksionon. Në të ardhmen ajo duhet të hiqet.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366120.jpg' width="100%" loading=lazy loading=lazy></p><p>Ju lutemi vini re se në rastin e tretë shiriti kaloi mbi tekst. Kjo për shkak se është më e madhe se lartësia e vijës. Prandaj, është e rëndësishme të sigurohet që të mos ketë kontradikta të tilla. Nëse bëni një lartësi të vogël rreshti, atëherë zvogëloni fontin në përputhje me rrethanat.</p><p>Nuk rekomandohet që teksti të jetë shumë i vogël dhe hapësira midis rreshtave të jetë shumë e vogël. Sepse asnjë përdorues nuk mund t'i lexojë me qetësi të gjitha këto. Sytë e tij do të lodhen shpejt. Motorët e kërkimit thonë gjithashtu se teksti duhet të jetë i përshtatshëm për përdoruesit.</p><p>Për më tepër, kohët e fundit ka pasur një theks të madh në komoditetin për përdoruesit e celularëve. Atje, rekomandimet thonë gjithmonë se madhësia e shkronjave duhet të jetë normale, jo e vogël. Kjo veçanërisht prek lidhjet. Me madhësinë e tyre të vogël, përdoruesi do ta ketë të vështirë të lundrojë në faqe.</p><p>Motori i kërkimit Google ka një mjet të veçantë që ndihmon në këtë analizë. Është shumë i përshtatshëm për webmasterët.</p><p>Këtu është një shembull i rezultateve që mund të ndodhin.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1366121.jpg' width="100%" loading=lazy loading=lazy></p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12">Të njohura në kategorinë:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Si të kombinoni shtresat në Photoshop në një ose t'i kombinoni ato në një grup Si të kombinoni disa shtresa në Photoshop"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Si të bashkoni shtresat në Photoshop në një ose t'i kombinoni ato në një grup ...</div> <a href="https://innovakon.ru/sq/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Si të kombinoni shtresat në Photoshop në një ose t'i kombinoni ato në një grup Si të kombinoni disa shtresa në Photoshop">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Transferimi i kontakteve në një telefon të ri android"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Transferimi i kontakteve në një telefon të ri android</div> <a href="https://innovakon.ru/sq/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Transferimi i kontakteve në një telefon të ri android">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Samsung Galaxy rindizet vetë - Zgjidhje Galaxy note 4 rindizet vetë"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy rindizet vetë - Zgjidhjet e Galaxy Note...</div> <a href="https://innovakon.ru/sq/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy rindizet vetë - Zgjidhje Galaxy note 4 rindizet vetë">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Karakteristikat kryesore të Kaspersky Rescue Disk"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Karakteristikat kryesore të Kaspersky Rescue Disk</div> <a href="https://innovakon.ru/sq/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Karakteristikat kryesore të Kaspersky Rescue Disk">lexoni</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div>  <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Artikujt e fundit</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook nuk do të lidhet me wifi MacBook nuk do të shohë...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Si të fitoni para në WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Tableti "Supra": vlerësimet e klientëve</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Vendndodhjet e anijeve në kohë reale</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Programet më të mira për Android Regjistroni thirrjet nga...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Heqja e jo-ndjekësve në Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Lidhja e internetit në një laptop: të gjitha të mundshme...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV është flamuri i ri...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">lexoni</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>Telefonat celularë dhe komunikimet</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Edicioni i projektit</a></li> <li><a href="">Reklamimi në faqen e internetit</a></li> </ul> <ul> <li><a href="https://innovakon.ru/sq/feedback.html">Kontaktet</a></li> <li><a href="https://innovakon.ru/sq/sitemap.xml">Harta e faqes</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Telefonat celularë dhe komunikimet</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Lëvizni në krye">Top</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>