Måten nettlesere håndterte hvite mellomrom på, er ikke veldig intuitiv i starten, spesielt hvis du sammenligner hvordan Hypertext Markup Language håndterer hvite mellomrom i forhold til tekstbehandlingsprogrammer. I tekstbehandlingsprogramvare kan du legge til mange avstander eller faner i dokumentet, og at avstanden gjenspeiles i visningen av dokumentets innhold. Dette WYSIWYG-designet er ikke tilfelle med HTML eller websider.
Avstand i trykk
I tekstbehandlingsprogramvare er de tre primære tegnene for mellomrom rom, fanen, og vognretur. Hver av disse tegnene fungerer på en tydelig måte, men i HTML gjengir nettlesere det samme. Enten du plasserer ett mellomrom eller 100 mellomrom i HTML-markering eller bland avstanden din opp med flik og vognretur, vil alle disse bli kondensert ned til ett mellomrom når siden gjengis av nettleser. I webdesignterminologi er dette kjent som hvite rom kollapser. Du kan ikke bruke disse typiske avstandstastene for å legge til mellomrom på en webside fordi nettleseren samler gjentatte mellomrom i bare ett mellomrom når det gjengis i nettleseren,
Bruke CSS til å lage HTML-faner og mellomrom
Nettsteder i dag er bygget med et skille mellom struktur og stil. Strukturen til en side håndteres av HTML mens stilen dikteres av Cascading Style Sheets. For å lage avstand eller oppnå et bestemt layout, slå til CSS i stedet for å legge mellomromstegn til HTML-koden.
Hvis du prøver å bruke faner for å lage kolonner med tekst, i stedet bruke
Hvis dataene du legger ut, er tabelldata, bruk tabeller for å justere dataene slik du vil. Tabeller får ofte en dårlig rap i webdesign fordi de ble misbrukt som rene layoutverktøy i så mange år, men tabeller er fremdeles helt gyldige hvis innholdet ditt inneholder virkelig tabelldata.
Marger, polstring og tekstinnrykk
De vanligste måtene å lage avstand med CSS er ved å bruke en av følgende CSS-stiler:
- margin
- polstring
- tekstinnrykk
For eksempel, trekk inn den første linjen i et avsnitt som en fane med følgende CSS (merk at dette forutsetter at avsnittet ditt har en klasseattributt "først" knyttet til seg):
s. første {
tekstinnrykk: 5em;
}
Dette avsnittet innrykker omtrent fem tegn.
Bruk margen eller polstringsegenskapene i CSS for å legge avstand til toppen, bunnen, venstre eller høyre (eller kombinasjoner av disse sidene) av et element. Oppnå alle slags avstander som trengs ved å slå til CSS.
Flytte tekst mer enn ett mellomrom uten CSS
Hvis alt du ønsker er at teksten din flyttes mer enn ett mellomrom vekk fra forrige element, bruker du det ikke-bryte rommet.
For å bruke det ikke-knekkende rommet legger du til så mange ganger du trenger det i HTML-markeringen din.
HTML respekterer disse ikke-bryte områdene og vil ikke kollapse dem til et enkelt mellomrom. Imidlertid blir denne tilnærmingen ansett som dårlig praksis, siden den bare legger til ekstra HTML-markering i et dokument for å oppnå layoutbehov. Når det er praktisk mulig, må du unngå å legge til rom som ikke bryter, bare for å oppnå ønsket layouteffekt og bruk CSS marginer og polstring i stedet.