Å lage mellomrom og fysisk separasjon av elementer i HTML kan være vanskelig å forstå for den begynnende webdesigneren. Dette er fordi HTML har en egenskap som kalles "hvitt romkollaps." om du skriver inn 1 mellomrom eller 100 i HTML-koden, vil nettleseren automatisk skjule disse mellomromene ned til bare ett mellomrom. Dette er forskjellig fra et program som Microsoft Word, som lar dokumentskapere legge til flere mellomrom for å skille ord og andre elementer i dokumentet. Slik fungerer ikke avstanden til nettstedsdesign.
Så hvordan legger du til mellomrom i HTML som vises på webside du har bygget? Denne artikkelen undersøker noen av de forskjellige måtene.
Plasser i HTML med CSS
Den foretrukne måten å legge til mellomrom i HTML-en din er med Cascading Style Sheets (CSS). CSS bør brukes til å legge til visuelle aspekter på en webside, og siden avstanden er en del av de visuelle designegenskapene til en side, er CSS der du vil at dette skal gjøres.
I CSS kan du bruke enten marg- eller polstringsegenskapene for å legge til plass rundt elementene. I tillegg legger tekstinnrykkegenskapen til plass foran på teksten, for eksempel for innrykk av avsnitt.
Her er et eksempel på hvordan du bruker CSS for å legge til plass foran alle avsnittene dine. Legg til følgende CSS i din utvendig eller innvendig stilark:
p {
tekstinnrykk: 3em;
}
Plasser i HTML inne i teksten
Hvis du bare vil legge til et ekstra mellomrom eller to i teksten din, kan du bruke det ikke-bryte rommet. Denne karakteren fungerer akkurat som en standard plasskarakter, bare den kollapser ikke inne i nettleseren.
Her er et eksempel på hvordan du legger til fem mellomrom i en tekstlinje:
Denne teksten har fem ekstra mellomrom
Bruker HTML:
Denne teksten har fem ekstra mellomrom
Du kan også bruke
tag for å legge til ekstra linjeskift.
Denne setningen har fem linjeskift på slutten av den
Hvorfor avstand i HTML er en dårlig idé
Mens disse alternativene begge fungerer - vil elementet som ikke bryter mellomrom, faktisk gi avstand til teksten og linjen pauser vil legge til avstand under avsnittet vist ovenfor - dette er ikke den beste måten å skape avstand i nettside. Å legge til disse elementene i HTML-en din legger til visuell informasjon i koden i stedet for å skille strukturen til en side (HTML) fra de visuelle stilene (CSS). Beste fremgangsmåter tilsier at disse skal være atskilte av en rekke årsaker, inkludert enkel oppdatering i fremtiden og total filstørrelse og sideytelse.
Hvis du bruker et eksternt stilark for å diktere alle stilene og avstandene dine, er det enkelt å endre disse stilene for hele nettstedet, siden du bare må oppdatere det ene stilarket.
Tenk på eksemplet ovenfor med setningen med fem
tagger på slutten av den. Hvis du vil ha den mengden avstand nederst i hvert avsnitt, må du legge til HTML-koden i hvert avsnitt på hele nettstedet ditt. Det er en god del ekstra markering som vil oppblåse sidene dine. I tillegg, hvis du bestemmer deg på veien for at denne avstanden er for mye eller for lite, og du vil endre det litt, må du redigere hvert enkelt avsnitt på hele nettstedet ditt. Nei takk!
I stedet for å legge til disse avstandselementene i koden din, bruk CSS.
p {
polstring-bunn: 20px;
}
Den ene linjen med CSS vil legge til avstand under sidens avsnitt. Hvis du ønsket å endre dette avstanden i fremtiden, kan du redigere denne linjen (i stedet for hele nettstedets kode), så er du klar!
Nå, hvis du trenger å legge til en enkelt plass i en del av nettstedet ditt, bruker du en
tag eller et enkelt rom som ikke bryter, er ikke verdens ende, men du må være forsiktig. Å bruke disse innebygde HTML-avstandsalternativene kan være en glatt skråning. Selv om en eller to ikke kan skade nettstedet ditt, vil du introdusere problemer på sidene dine hvis du fortsetter på den veien. Til slutt er det bedre å slå til CSS for HTML-avstand og alle andre visuelle behov på websiden.