Lag HTML-mellomrom

Lag mellomrom og fysisk separasjon av elementer i HTML med CSS

Å lage mellomrom og fysisk separasjon av elementer i HTML kan være vanskelig å forstå for en nybegynner webdesigner. Dette er fordi HTML har en egenskap kjent som 'whitespace collapse'. enten du skriver inn 1 mellomrom eller 100 i HTML-koden din, skjuler nettleseren disse mellomrommene automatisk til bare ett enkelt mellomrom. Dette er forskjellig fra et program som Microsoft Word , som lar dokumentskapere legge til flere mellomrom for å skille ord og andre elementer i det dokumentet. Dette er ikke hvordan webdesignavstand fungerer.

Så hvordan legger du til mellomrom i HTML som vises på nettsiden du har laget ? Denne artikkelen undersøker noen av de forskjellige måtene.

RapidEye / Getty Images

Mellomrom i HTML med CSS

Den foretrukne måten å legge til mellomrom i HTML er med Cascading Style Sheets (CSS) . CSS bør brukes til å legge til eventuelle visuelle aspekter ved en nettside, og siden avstanden er en del av de visuelle designkarakteristikkene 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 elementer. I tillegg legger egenskapen tekstinnrykk til plass foran 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 til din utvendig eller innvendig stilark:

|_+_|

Mellomrom i HTML i teksten din

Hvis du bare vil legge til et ekstra mellomrom eller to i teksten din, kan du bruke det uavbrytende mellomrommet. Dette tegnet fungerer akkurat som et standard mellomromstegn, men det kollapser ikke inne i nettleseren.

Her er et eksempel på hvordan du legger til fem mellomrom i en tekstlinje:

|_+_|

Bruker HTML:

|_+_|

Du kan også bruke
tag for å legge til ekstra linjeskift.

|_+_|

Hvorfor mellomrom i HTML er en dårlig idé

Selv om disse alternativene begge fungerer – det ikke-brytende mellomromselementet vil faktisk legge til mellomrom til teksten din og linjeskiftene vil legge til mellomrom under avsnittet vist ovenfor – er dette ikke den beste måten å lage mellomrom på nettsiden din. Å legge til disse elementene i HTML-en din legger til visuell informasjon til koden i stedet for å skille strukturen til en side (HTML) fra de visuelle stilene (CSS). Beste praksis tilsier at disse bør være separate av en rekke årsaker, inkludert enkel oppdatering i fremtiden og samlet filstørrelse og sideytelse .

Hvis du bruker et eksternt stilark for å diktere alle stilene og avstanden, er det enkelt å endre disse stilene for hele nettstedet, siden du ganske enkelt må oppdatere det ene stilarket.

Tenk på eksemplet ovenfor med setningen med fem
tagger på slutten av den. Hvis du ville ha så mye mellomrom 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 blåse opp sidene dine. I tillegg, hvis du bestemmer deg for at denne avstanden er for stor eller for liten, og du ønsker å endre den litt, må du redigere hvert eneste avsnitt på hele nettstedet ditt. Nei takk!

I stedet for å legge til disse avstandselementene i koden din, bruk CSS.

|_+_|

Den ene linjen med CSS vil legge til mellomrom under sidens avsnitt. Hvis du ønsker å endre denne avstanden i fremtiden, rediger denne ene 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, ved å bruke en
tag eller en enkelt ikke-brytende plass er ikke verdens undergang, men du må være forsiktig. Å bruke disse inline HTML-avstandsalternativene kan være en glatt skråning. Selv om en eller to kanskje ikke skader nettstedet ditt, vil du introdusere problemer på sidene dine hvis du fortsetter den veien. Til slutt er det bedre å vende seg til CSS for HTML-avstand og alle andre visuelle behov for nettsider.​