Ovisno o vrsti prostora koji želite generirati, možete dodati više praznog prostora u HTML na web stranici na različite načine.
Mnoge različite tehnike za stvaranje više prostora pomoću HTML-a i CSS-a obrađene su u donjim odjeljcima.
Dodavanje dodatnih razmaka prije ili poslije teksta
Jedan od najsloženijih aspekata generiranja web stranice za nove korisnike je taj što ne mogu pritisnuti razmaknicu nekoliko puta kako bi stvorili više prostora.
Koristite (neprekinuti razmak) prošireni HTML znak za dodavanje dodatnih razmaka prije, poslije ili između vašeg sadržaja.
Na primjer, u HTML-u imamo sljedeći kod za izraz “dodatni prostor” s dvostrukim razmakom.
dodatni prostor
Zadržite prostor dok lijepite sadržaj na stranicu.
HTML <pre> element može se koristiti za održavanje formatiranog teksta pri kopiranju teksta s dodatnim razmacima ili tabulatorima.
Element <pre> koristi se za lijepljenje teksta s dodatnim razmacima, kao što je prikazano u nastavku.
<pre class="tab">Ovaj tekst ima puno razmaka.</pre>Dodavanje dodatnog prostora oko elementa ili stavke
Dodatni prostor se može primijeniti na vrh, desno, dno ili lijevo od bilo kojeg HTML elementa.
Prije nego što odaberete vrstu prostora koji želite postaviti oko elementa ili objekta, pobrinite se da shvatite razliku između margin i padding.
Padding okružuje element unutar ivice i margin izvan ruba.
<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Primjer odlomka s marginom i paddingom.</p>“margin-left: 2.5em;” dodaje 2,5em lijevi margin u prvom dijelu koda, ostavljajući dojam uvučenog teksta.
Ovaj razmak je izvan granice.
“padding: 0 7em 2em 0;” definira gornji, desni, donji i lijevi (u smjeru kazaljke na satu) padding.
Gornji padding je “0”, desni padding “7em”, donji padding “2em”, a lijevi padding “0”.
Ostatak ovog primjera troši se na definiranje izgleda granice.
Korištenje CSS-a i HTML-a za izradu kartice
U HTML-u se kartica može generirati promjenom lijevog margin elementa.
Na primjer, ako želite 2,5 em lijevi margin od elementa koji sadrži tekst.
.tab {
margin-left: 2.5em
}Nakon dodavanja ovog koda u našu CSS datoteku, možemo koristiti klasu “tab” da učinimo da bilo koji tekst izgleda kao kartica.
Ovisno o vašim zahtjevima, vrijednost lijevog margina može se povećati ili smanjiti.
Iako predlažemo gornju tehniku, možete primijeniti i inline CSS margin s lijeve strane, kao što se vidi u donjem primjeru.
<p style="margin-left:2.5em">Primjer 5em lijevog margina.</p>Dodavanje razmaka ispod retka ili odlomka teksta
<br> element se može koristiti za pružanje dodatnog prostora ispod retka ili odlomka teksta koji se mora dodati samo jednom.
Primjer kako se ovaj pristup može koristiti prikazan je u nastavku.
<p>Ova rečenica sadrži primjer teksta.<br>
<br>
Kao što vidite, dvije pauze dodaju gornji prostor.</p>Ako je potrebno, mogu se umetnuti dodatne pauze i razmaci.
Ako stavljate pauze i razmake oko teksta na mnogo lokacija na stranici, preporučujemo korištenje prethodno opisanog CSS pristupa.
Kako povećati prostor između redova
Da bi se tekst lakše čitao, razmak između redova teksta može se promijeniti pomoću CSS-a podizanjem i spuštanjem visine retka.
Primjer dodavanja dodatnog prostora za red u odlomak teksta prikazan je ispod.
<p style="line-height:3.5em;">Tekst s dodatnim razmakom.</p>Kako bismo istakli jaz između redova, odabrali smo visinu linije od 3,5em u gornjem uzorku.
Međutim, preporučujemo odabir veličine fonta od oko 1,7em radi čitljivosti.
Čitljivost vašeg sadržaja uvijek se poboljšava dodavanjem malo dodatnog razmaka između redova.
S druge strane, dodavanje previše može otežati praćenje i skeniranje.