De manier waarop browsers met witruimte omgaan, is in het begin niet erg intuïtief, vooral als je vergelijkt hoe Hypertext Markup Language omgaat met witruimte in vergelijking met tekstverwerkingsprogramma's. In tekstverwerkingssoftware kunt u veel spatiëring of tabs in het document toevoegen en die spatiëring wordt weerspiegeld in de weergave van de inhoud van het document. Dit WYSIWYG-ontwerp is niet het geval bij HTML of bij webpagina's.
Spatiëring in afdruk
In tekstverwerkingssoftware zijn de drie primaire witruimtetekens de ruimte, tabblad, en koetsretour. Elk van deze karakters werkt op een andere manier, maar in HTML geven browsers ze allemaal in wezen hetzelfde weer. Of je nu één vakje of 100 vakjes in je HTML-opmaak of meng uw spatiëring met tabs en regelterugloop, deze worden allemaal gecondenseerd tot één spatie wanneer de pagina wordt weergegeven door de browser. In de terminologie van webdesign staat dit bekend als: witte ruimte instorten. U kunt deze typische spatietoetsen niet gebruiken om witruimte in een webpagina toe te voegen, omdat de browser herhaalde spaties samenvouwt tot slechts één spatie wanneer deze in de browser wordt weergegeven.
CSS gebruiken om HTML-tabbladen en spaties te maken
Websites worden tegenwoordig gebouwd met een scheiding van structuur en stijl. De structuur van een pagina wordt afgehandeld door HTML, terwijl de stijl wordt bepaald door Cascading Style Sheets. Om spaties te creëren of een bepaalde lay-out te bereiken, ga je naar CSS in plaats van spaties toe te voegen aan de HTML-code.
Als u probeert te gebruiken tabbladen om kolommen met tekst te maken, gebruik in plaats daarvan
Als de gegevens die u opmaakt tabelgegevens zijn, gebruikt u tabellen om die gegevens naar wens uit te lijnen. Tabellen krijgen vaak een slechte reputatie in webdesign omdat ze jarenlang werden misbruikt als pure lay-outtools, maar tabellen zijn nog steeds perfect geldig als uw inhoud echt tabelgegevens bevat.
Marges, opvulling en tekstinspringing
De meest gebruikelijke manieren om afstand te creëren met CSS is door een van de volgende CSS-stijlen te gebruiken:
- marge
- opvulling
- tekst streepje
Laat bijvoorbeeld de eerste regel van een alinea inspringen als een tabblad met de volgende CSS (merk op dat dit ervan uitgaat dat aan uw alinea een class-attribuut van "first" is gekoppeld):
p.eerste {
tekst-inspringing: 5em;
}
Deze alinea springt ongeveer vijf tekens in.
Gebruik de marge- of opvuleigenschappen in CSS om tussenruimte toe te voegen aan de boven-, onder-, linker- of rechterkant (of combinaties van die zijden) van een element. Bereik elke vorm van ruimte die nodig is door naar CSS te gaan.
Tekst meer dan één spatie verplaatsen zonder CSS
Als u alleen wilt dat uw tekst meer dan één spatie van het vorige item wordt verwijderd, gebruikt u de vaste spatie.
Om de vaste spatie te gebruiken, voegt u zo vaak als je nodig hebt in je HTML-opmaak.
HTML respecteert deze niet-afbrekende spaties en zal ze niet samenvouwen tot een enkele spatie. Deze benadering wordt echter als een slechte praktijk beschouwd, omdat het alleen extra HTML-opmaak aan een document toevoegt om aan de opmaakbehoeften te voldoen. Vermijd indien mogelijk het toevoegen van vaste spaties om het gewenste lay-outeffect en gebruik te bereiken CSS-marges en opvulling in plaats daarvan.