Sådan oprettes HTML-mellemrum

click fraud protection

Oprettelse af mellemrum og fysisk adskillelse af elementer i HTML kan være svært at forstå for den begyndende webdesigner. Dette er fordi HTML har en egenskab kendt som "hvidt mellemrumskollaps." Uanset om du skriver 1 mellemrum eller 100 i din HTML-kode, kollapser webbrowseren automatisk disse mellemrum ned til kun et enkelt mellemrum. Dette adskiller sig fra et program som Microsoft Word, som gør det muligt for dokumentskabere at tilføje flere mellemrum for at adskille ord og andre elementer i dokumentet. Sådan fungerer afstanden mellem webstedsdesign ikke.

Så hvordan tilføjer du hvide rum i HTML, der vises på webside, du har bygget? Denne artikel undersøger nogle af de forskellige måder.

HTML-kode på en hvid baggrund
RapidEye / Getty Images

Pladser i HTML med CSS

Den foretrukne måde at tilføje mellemrum i din HTML er med Cascading Style Sheets (CSS). CSS skal bruges til at tilføje visuelle aspekter af en webside, og da afstanden er en del af de visuelle designegenskaber på en side, er CSS det sted, hvor du ønsker, at dette skal gøres.

instagram viewer

I CSS kan du bruge enten margen- eller polstringsegenskaber til at tilføje plads omkring elementer. Derudover tilføjer egenskaben tekstindryk plads til forsiden af ​​teksten, f.eks. Til indrykning af afsnit.

Her er et eksempel på, hvordan du bruger CSS til at tilføje plads foran alle dine afsnit. Føj følgende CSS til din ekstern eller indre stilark:

p {
tekstindryk: 3em;
}

Pladser i HTML inde i din tekst

Hvis du bare vil tilføje et ekstra mellemrum eller to til din tekst, kan du bruge det ikke-brudende mellemrum. Denne karakter fungerer ligesom en standard pladskarakter, kun den kollapser ikke inde i browseren.

Her er et eksempel på, hvordan du tilføjer fem mellemrum inde i en tekstlinje:

Denne tekst har fem ekstra mellemrum inde

Bruger HTML:

Denne tekst har fem ekstra mellemrum inde

Du kan også bruge
 tag for at tilføje ekstra linjeskift.

Denne sætning har fem linjeskift i slutningen af ​​den 





Hvorfor afstand i HTML er en dårlig idé

Mens disse muligheder begge fungerer - elementet, der ikke bryder mellemrum, tilføjer faktisk afstand til din tekst og linjen pauser tilføjer afstand under afsnittet vist ovenfor - dette er ikke den bedste måde at skabe afstand i din hjemmeside. Tilføjelse af disse elementer til din HTML tilføjer visuel information til koden i stedet for at adskille strukturen på en side (HTML) fra de visuelle typografier (CSS). Bedste praksis dikterer, at disse skal være adskilte af en række årsager, herunder let opdatering i fremtiden og den samlede filstørrelse og side ydeevne.

Hvis du bruger et eksternt typografiark til at diktere alle dine typografier og afstand, er det nemt at ændre disse typografier for hele webstedet, da du simpelthen skal opdatere det ene typografiark.

Overvej eksemplet ovenfor i sætningen med fem
tags i slutningen af ​​det. Hvis du ville have denne afstand i bunden af ​​hvert afsnit, skal du tilføje den HTML-kode til hvert afsnit på hele dit websted. Det er en hel del ekstra markering, der vil sprænge dine sider. Derudover, hvis du beslutter dig på vejen for, at denne afstand er for meget eller for lille, og du vil ændre det lidt, skal du redigere hvert enkelt afsnit på hele dit websted. Nej tak!

Brug CSS i stedet for at tilføje disse afstandselementer til din kode.

p {
polstring-bund: 20 px;
}

Den ene linje af CSS tilføjede afstand under din sides afsnit. Hvis du vil ændre denne afstand i fremtiden, skal du redigere denne ene linje (i stedet for hele dit websteds kode), og du er klar til at gå!

Nu, hvis du har brug for at tilføje et enkelt mellemrum i en del af dit websted ved hjælp af en
tag eller et enkelt ikke-brudende rum er ikke verdens ende, men du skal være forsigtig. Brug af disse indbyggede HTML-afstandsindstillinger kan være en glat hældning. Mens en eller to muligvis ikke skader dit websted, vil du introducere problemer på dine sider, hvis du fortsætter ned ad denne sti. I sidste ende er det bedre for dig at henvende dig til CSS for HTML-afstand og alle andre visuelle websides behov.

instagram story viewer