Den måde, browsere håndterede hvidt rum på, er ikke særlig intuitiv i starten, især hvis du sammenligner, hvordan Hypertext Markup Language håndterer hvidt rum i forhold til tekstbehandlingsprogrammer. I tekstbehandlingssoftware kan du tilføje masser af mellemrum eller faner i dokumentet, og afstanden afspejles i visningen af dokumentets indhold. Dette WYSIWYG-design er ikke tilfældet med HTML eller websider.
Afstand i tryk
I tekstbehandlingssoftware er de tre primære tegn i mellemrummet plads, fanenog vognretur. Hver af disse tegn fungerer på en tydelig måde, men i HTML gengiver browsere dem stort set ens. Uanset om du placerer et mellemrum eller 100 mellemrum i dit HTML-markering eller bland din afstand op med faner og vognreturer, alle disse kondenseres ned til et mellemrum, når siden gengives af browser. I webdesignterminologi er dette kendt som hvidt rum kollapser. Du kan ikke bruge disse typiske mellemrumstaster til at tilføje mellemrum på en webside, fordi browseren kollapser gentagne mellemrum i kun et mellemrum, når det gengives i browseren,
Brug af CSS til at oprette HTML-faner og mellemrum
Websteder i dag er bygget med en adskillelse af struktur og stil. Strukturen på en side håndteres af HTML, mens stilen dikteres af Cascading Style Sheets. For at oprette afstand eller opnå et bestemt layout skal du dreje til CSS i stedet for at tilføje mellemrumstegn til HTML-koden.
Hvis du prøver at bruge faner for at oprette kolonner med tekst, brug i stedet
Hvis de data, du lægger ud, er tabeldata, skal du bruge tabeller til at justere disse data, som du vil. Tabeller får ofte en dårlig rap i webdesign, fordi de blev misbrugt som rene layoutværktøjer i så mange år, men tabeller er stadig perfekt gyldige, hvis dit indhold indeholder ægte tabeldata.
Margener, polstring og indrykning af tekst
De mest almindelige måder at oprette afstand med CSS er ved at bruge en af følgende CSS-stilarter:
- margen
- polstring
- tekstindryk
Indryk f.eks. Den første linje i et afsnit som en fane med følgende CSS (bemærk, at dette forudsætter, at dit afsnit har en klasseattribut på "første" knyttet til det):
s. første {
tekstindryk: 5em;
}
Dette afsnit indrykker omkring fem tegn.
Brug margen eller polstringsegenskaber i CSS for at tilføje afstand til toppen, bunden, venstre eller højre (eller kombinationer af disse sider) af et element. Opnå enhver form for afstand, der er nødvendig, ved at dreje til CSS.
Flytning af tekst mere end et mellemrum uden CSS
Hvis alt hvad du ønsker er, at din tekst flyttes mere end et mellemrum væk fra det foregående element, skal du bruge det ikke-brudte mellemrum.
For at bruge det ikke-brudende rum skal du tilføje så mange gange som du har brug for det i din HTML-markering.
HTML respekterer disse ikke-brudende mellemrum og kollapser dem ikke til et enkelt mellemrum. Denne tilgang betragtes imidlertid som en dårlig praksis, da den kun tilføjer ekstra HTML-markering til et dokument for at opnå layoutbehov. Når det er praktisk muligt, skal du undgå at tilføje ikke-brudende mellemrum blot for at opnå den ønskede layouteffekt og brug CSS margener og polstring i stedet.