Oprettelse af mellemrum og fysisk adskillelse af elementer i HTML kan være svært at forstå for den første webdesigner. Dette skyldes, at HTML har en ejendom kendt som "whitespace collapse." uanset om du skriver 1 plads eller 100 i din HTML-kode, kollapser webbrowseren automatisk disse mellemrum til kun et enkelt rum. Dette adskiller sig fra et program som Microsoft Word, som gør det muligt for dokumentproducenter at tilføje flere mellemrum for at adskille ord og andre elementer i det pågældende dokument. Det er ikke sådan, hvordan webdesignafstand fungerer.
Så, hvordan tilføjer du hvide rum i HTML, der vises på websiden? Denne artikel undersøger nogle af de forskellige måder.
Spaces i HTML med CSS
Den foretrukne måde at tilføje mellemrum på i din HTML er med Cascading Style Sheets (CSS). CSS skal bruges til at tilføje eventuelle visuelle aspekter af en webside, og da afstanden er en del af de visuelle designegenskaber af en side, er CSS hvor du vil have dette gjort.
I CSS kan du bruge enten margin eller polstring egenskaber til at tilføje plads omkring elementer. Derudover tilføjer tekstindrykkets egenskab plads til tekstens forside, f.eks. For indrykning af afsnit.
Her er et eksempel på, hvordan du bruger CSS til at tilføje plads foran alle dine afsnit. Tilføj følgende CSS til dit eksterne eller interne stilark:
p {tekstindtryk: 3em;} Hvis du blot vil tilføje et ekstra mellemrum eller to til din tekst, kan du bruge det ikke-brudte rum. Denne karakter fungerer ligesom et standard rumtegn, kun det falder ikke sammen inde i browseren. Her er et eksempel på hvordan man tilføjer fem mellemrum inden for en tekstlinje: Denne tekst har fem ekstra mellemrum i den Bruger HTML: Denne tekst har fem ekstra mellemrum i den Du kan også bruge Denne sætning har fem linjeskift i slutningen af den Selvom disse valgmuligheder begge fungerer - vil elementet, der ikke brækker mellemrum, faktisk tilføje afstand til din tekst, og linjeskiftene tilføjer mellemrum under det ovenfor viste stykke - dette er ikke den bedste måde at skabe mellemrum på din webside på. 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 stilarter (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 sideydelse. Hvis du bruger et eksternt stilark til at diktere alle dine stilarter og mellemrum, er det nemt at ændre disse stilarter til hele webstedet, da du simpelthen skal opdatere det ene stilark. Overvej ovenstående eksempel på sætningen med fem I stedet for at tilføje disse afstandselementer til din kode, skal du bruge CSS. p {polstring-bund: 20px;} Den ene linje af CSS ville tilføje mellemrum under din sides afsnit. Hvis du ønsker at ændre denne afstand i fremtiden, skal du redigere denne ene linje (i stedet for hele dit websites kode), og du er god at gå! Nu, hvis du skal tilføje et enkelt rum i en del af dit websted, skal du bruge en Mellemrum i HTML: Inde i din tekst
tag for at tilføje ekstra linjeskift.
Hvorfor Spacing i HTML er en dårlig idé
tags i slutningen af det. Hvis du ønskede den mængde afstand i bunden af hvert afsnit, skal du tilføje den pågældende HTML-kode til hvert afsnit på hele dit websted. Det er en hel del ekstra markup som vil opblåse dine sider. Hvis du vælger ned ad vejen, at denne afstand er for meget eller for lidt, og du ønsker at ændre den lidt, skal du også redigere hvert enkelt afsnit på hele dit website. Nej tak!
tag eller et enkelt ikke-brudte rum er ikke verdens ende, men du skal være forsigtig. Brug af disse inline HTML mellemrum muligheder kan være en glat hældning. Selv om en eller to ikke må skade dit websted, vil du medføre problemer i dine sider, hvis du fortsætter ned ad den pågældende sti. I sidste ende er du bedre til at vende sig til CSS for HTML-mellemrum og alle andre websides visuelle behov.
