Način na koji su preglednici postupali s praznim prostorom isprva nije baš intuitivan, pogotovo ako usporedite kako Hypertext Markup Language postupa s praznim prostorom u odnosu na programe za obradu teksta. U softveru za obradu teksta u dokument možete dodati puno razmaka ili kartica i taj će se razmak odraziti na prikazu sadržaja dokumenta. Ovaj WYSIWYG dizajn nije slučaj s HTML-om ili s web-stranicama.
Razmak u ispisu
U softveru za obradu teksta tri su primarna razmaka znaka prostor, tab, i povrat prtljage. Svaki od ovih znakova djeluje na različit način, ali u HTML-u preglednici ih čine u osnovi jednakima. Bez obzira smjestite li jedan prostor ili 100 mjesta u svoj HTML označavanje ili pomiješajte svoje razmake s karticama i povratima nosača, sve će se to sažeti u jedan prostor kada stranica generira preglednik. U terminologiji web dizajna ovo je poznato kao kolaps bijelog prostora. Ne možete koristiti ove tipične tipke za razmak za dodavanje razmaka na web stranici jer preglednik sažima ponovljene razmake u samo jedan prostor kada se generiraju u pregledniku,
Korištenje CSS-a za stvaranje HTML kartica i razmaka
Današnje web stranice grade se odvojeno od strukture i stila. Strukturom stranice upravlja HTML, dok stil diktiraju kaskadni tabele stilova. Da biste stvorili razmak ili postigli određeni izgled, okrenite se CSS-u, umjesto da u HTML kôd dodate znakove za razmak.
Ako pokušavate koristiti kartice umjesto stvaranja stupaca teksta
Ako su podaci koje izlažete tablični podaci, upotrijebite tablice da biste te podatke poravnali kako želite. Tablice se često loše odražavaju u web dizajnu jer su ih toliko godina zlostavljane kao čisti alati za postavljanje, ali tablice su i dalje savršeno važeće ako vaš sadržaj sadrži istinski tabelarne podatke.
Margine, dodavanje i uvlačenje teksta
Najčešći načini za stvaranje razmaka s CSS-om su pomoću jednog od sljedećih CSS stilova:
- margina
- podmetanje
- uvlaka teksta
Na primjer, uvucite prvi redak odlomka poput kartice sa sljedećim CSS-om (imajte na umu da ovo podrazumijeva da vaš odlomak ima atribut klase "first"):
str.prvi {
uvlaka teksta: 5em;
}
Ovaj odlomak uvlači oko pet znakova.
Upotrijebite svojstva margine ili popunjavanja u CSS za dodavanje razmaka na vrh, dno, lijevo ili desno (ili kombinacije tih strana) elementa. Postignite bilo kakav razmak potreban okretanjem CSS-u.
Premještanje teksta više od jednog prostora bez CSS-a
Ako sve što želite jest da se vaš tekst premjesti za više od jednog prostora od prethodne stavke, upotrijebite razmak koji se ne lomi.
Da biste koristili prostor koji se ne lomi, dodajte onoliko puta koliko vam je potrebno u vašem HTML označavanju.
HTML poštuje te neprekidne prostore i neće ih sažeti u jedan prostor. Međutim, ovaj se pristup smatra lošom praksom jer dodaje dodatnu HTML oznaku dokumentu samo da bi se postigle potrebe za izgledom. Kad je to izvedivo, izbjegavajte dodavanje nerazbijajućih razmaka samo da biste postigli željeni efekt izgleda i upotrebu CSS margine i popunjavanje umjesto toga.