Att skapa utrymmen och fysisk separation av element i HTML kan vara svårt att förstå för den webbdesigners som börjar. Det här är för att HTML har en egenskap som kallas "blankstegskollaps." oavsett om du skriver 1 blanksteg eller 100 i din HTML-kod, kommer webbläsaren automatiskt att komprimera dessa mellanslag till bara ett enda mellanslag. Detta skiljer sig från ett program som Microsoft Word, vilket gör det möjligt för dokumentskapare att lägga till flera mellanslag för att separera ord och andra element i det dokumentet. Det är inte så avståndet mellan webbdesign fungerar.
Så, hur lägger du till mellanslag i HTML som visas på webbsida du har skapat? Denna artikel undersöker några av de olika sätten.
Platser i HTML med CSS
Det föredragna sättet att lägga till mellanslag i din HTML är med Cascading Style Sheets (CSS). CSS bör användas för att lägga till alla visuella aspekter på en webbsida, och eftersom avståndet är en del av den visuella designegenskaperna på en sida är CSS där du vill att detta ska göras.
I CSS kan du använda antingen marginalen eller vadderingsegenskaperna för att lägga till utrymme runt element. Dessutom lägger egenskapen textindrag utrymme till framsidan av texten, till exempel för indragning av stycken.
Här är ett exempel på hur du använder CSS för att lägga till utrymme framför alla dina stycken. Lägg till följande CSS i din extern eller inre stilark:
p {
textindrag: 3em;
}
Platser i HTML inuti din text
Om du bara vill lägga till ett extra utrymme eller två i din text kan du använda det icke-brytande utrymmet. Denna karaktär fungerar precis som en vanlig rymdkaraktär, bara den kollapsar inte i webbläsaren.
Här är ett exempel på hur du lägger till fem mellanslag i en textrad:
Denna text har fem extra mellanslag inuti
Använder HTML:
Denna text har fem extra mellanslag inuti
Du kan också använda
tagg för att lägga till extra radbrytningar.
Denna mening har fem radavbrott i slutet av den
Varför avstånd i HTML är en dålig idé
Även om dessa alternativ fungerar - kommer det icke-brytande mellanslagselementet att lägga till avstånd till din text och raden pauser kommer att lägga till avstånd under avsnittet som visas ovan - det här är inte det bästa sättet att skapa avstånd i din webbsida. Om du lägger till dessa element i din HTML läggs visuell information till koden istället för att separera strukturen på en sida (HTML) från de visuella stilarna (CSS). Bästa praxis dikterar att dessa ska vara separata av ett antal skäl, inklusive enkel uppdatering i framtiden och övergripande filstorlek och sidans prestanda.
Om du använder ett externt formatmall för att diktera alla dina stilar och avstånd är det enkelt att ändra dessa stilar för hela webbplatsen, eftersom du helt enkelt måste uppdatera det ena stilarket.
Tänk på exemplet ovan i meningen med fem
taggar i slutet av den. Om du ville ha det avståndet längst ner i varje stycke, måste du lägga till HTML-koden i varje stycke på hela din webbplats. Det är en hel del extra markering som kommer att sprida dina sidor. Dessutom, om du bestämmer dig på vägen att detta avstånd är för mycket eller för litet, och du vill ändra det lite, måste du redigera varje enskilt stycke på hela din webbplats. Nej tack!
Använd CSS istället för att lägga till dessa avståndselement i din kod.
p {
stoppning-botten: 20px;
}
Den ena raden av CSS skulle lägga till avstånd under sidans stycken. Om du vill ändra det avståndet i framtiden, redigera den här raden (istället för hela webbplatsens kod) så är du klar!
Om du nu behöver lägga till ett enda utrymme i en del av din webbplats, använder du en
tagg eller ett enda icke-brytande utrymme är inte världens ände, men du måste vara försiktig. Att använda dessa inbyggda HTML-avståndsalternativ kan vara en hal sluttning. Även om en eller två kanske inte skadar din webbplats, kommer du att införa problem på dina sidor om du fortsätter längs den vägen. Till slut är det bättre att du vänder dig till CSS för HTML-avstånd och alla andra webbsidans visuella behov.