Det sätt som webbläsare hanterade vitt utrymme på är inte särskilt intuitivt först, speciellt om du jämför hur Hypertext Markup Language hanterar vitt utrymme i förhållande till ordbehandlingsprogram. I ordbehandlingsprogramvara kan du lägga till massor av avstånd eller flikar i dokumentet och det avståndet kommer att återspeglas i visningen av dokumentets innehåll. Denna WYSIWYG-design är inte fallet med HTML eller med webbsidor.
Avstånd i tryck
I ordbehandlingsprogramvara är de tre primära blankstegstecken Plats, flikoch vagnretur. Var och en av dessa karaktärer fungerar på ett distinkt sätt, men i HTML gör webbläsare dem i stort sett desamma. Oavsett om du placerar ett mellanslag eller 100 mellanslag i ditt HTML-markering eller blanda ditt avstånd med flikar och vagnreturer, alla dessa kommer att kondenseras till ett mellanslag när sidan återges av webbläsare. I webbdesignterminologi kallas detta vitt utrymme kollapsar. Du kan inte använda dessa typiska mellanslagstangenter för att lägga till mellanslag på en webbsida eftersom webbläsaren kollapsar upprepade mellanslag till endast ett utrymme när det återges i webbläsaren,
Använda CSS för att skapa HTML-flikar och mellanrum
Webbplatser idag är byggda med en separering av struktur och stil. Strukturen på en sida hanteras av HTML medan stilen dikteras av Cascading Style Sheets. För att skapa avstånd eller uppnå en viss layout, vänd dig till CSS istället för att lägga till avståndstecken i HTML-koden.
Om du försöker använda flikar för att skapa kolumner med text, istället använda
Om data du lägger ut är tabelldata, använd tabeller för att justera den informationen som du vill. Tabeller får ofta en dålig rap i webbdesign eftersom de missbrukades som rena layoutverktyg i så många år, men tabeller är fortfarande helt giltiga om ditt innehåll innehåller verkligt tabelldata.
Marginaler, vaddering och textindrag
De vanligaste sätten att skapa avstånd med CSS är att använda en av följande CSS-stilar:
- marginal
- stoppning
- textindrag
Till exempel, fördjupa den första raden i ett stycke som en flik med följande CSS (notera att detta förutsätter att ditt stycke har ett klassattribut av "första" bifogat):
p.first {
textindrag: 5em;
}
Denna punkt indrycker cirka fem tecken.
Använd marginalen eller vadderingsegenskaperna i CSS för att lägga till avstånd till toppen, botten, vänster eller höger (eller kombinationer av dessa sidor) av ett element. Uppnå alla typer av avstånd som behövs genom att vända dig till CSS.
Rörande text mer än ett mellanslag utan CSS
Om allt du vill är att din text ska flyttas mer än ett mellanslag från föregående objekt, använd det blanksteg.
För att använda det icke-brytande utrymmet lägger du till så många gånger du behöver det i din HTML-markering.
HTML respekterar dessa icke-brytande utrymmen och kommer inte att kollapsa dem till ett enda utrymme. Detta tillvägagångssätt anses dock vara en dålig praxis eftersom det bara tillför extra HTML-markering till ett dokument för att uppnå layoutbehov. När det är praktiskt möjligt, undvik att lägga till icke-brytande utrymmen för att uppnå önskad layouteffekt och användning CSS-marginaler och stoppning istället.