Å skape mellomrom og fysisk separasjon av elementer i HTML kan være vanskelig å forstå for begynnelsen webdesigner. Dette skyldes at HTML har en egenskap kjent som "hvite plass sammenbrudd." enten du skriver 1 plass eller 100 i HTML-koden, kolliderer nettleseren automatisk disse mellomrommene ned til bare ett enkeltrom. Dette er forskjellig fra et program som Microsoft Word, som gjør at dokumentopprørere kan legge til flere mellomrom for å skille ord og andre elementer i det dokumentet. Dette er ikke hvordan webdesignavstand fungerer.
Så, hvordan legger du til hvite rom i HTML som dukker opp på nettsiden? Denne artikkelen undersøker noen av de forskjellige måtene.
Rom 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 noen visuelle sider på en nettside, 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 enten bruke margene eller polstringsegenskapene for å legge til plass rundt elementene. I tillegg legger egenskapen for tekstinnhold til plass til forsiden av teksten, for eksempel for innrykning av avsnitt.
Her er et eksempel på hvordan du bruker CSS til å legge til plass foran alle avsnittene dine. Legg til følgende CSS i ditt eksterne eller interne stilark:
p {tekstinntrykk: 3em;} Hvis du bare vil legge til en ekstra plass eller to til teksten din, kan du bruke det ikke-bryte rommet. Denne karakteren fungerer som et vanlig mellomrom, bare det 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 i den Bruker HTML: Denne teksten har fem ekstra mellomrom i den Du kan også bruke Denne setningen har fem linjeskift på slutten av den Mens disse alternativene begge virker - vil ikke-bryte mellomromelementet legge til mellomrom til teksten din og linjeskiftene vil legge til mellomrom under avsnittet som er vist ovenfor - dette er ikke den beste måten å skape mellomrom på websiden 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). Best practices dikterer at disse skal være adskilt av flere grunner, inkludert enkel oppdatering i fremtiden og total filstørrelse og sideytelse. Hvis du bruker et eksternt stilark for å diktere alle stiler og mellomrom, er det enkelt å endre disse stilene for hele nettstedet, siden du bare må oppdatere det ene stilarket. Tenk på eksemplet over setningen med fem I stedet for å legge til disse avstandselementene i koden din, bruk CSS. p {polstring-bunn: 20px;} Den ene linjen med CSS vil legge til mellomrom under sidens avsnitt. Hvis du vil endre dette avstanden i fremtiden, rediger denne linjen (i stedet for hele nettstedets kode), og du er god til å gå! Nå, hvis du trenger å legge til en enkelt plass i en del av nettstedet ditt, bruker du en Rom i HTML: Inne i teksten
tag for å legge til ekstra linjeskift.
Hvorfor Spacing i HTML er en dårlig idé
merker på slutten av det. Hvis du ville ha den mengden av avstand nederst i hvert avsnitt, må du legge til den HTML-koden til hvert avsnitt i hele nettstedet ditt. Det er en god del ekstra oppslag som vil oppblåse sidene dine. I tillegg, hvis du bestemmer deg nedover veien at denne avstanden er for stor eller for liten, og du ønsker å endre den litt, må du redigere hvert enkelt avsnitt på hele nettstedet ditt. Nei takk!
tag eller en enkelt ikke-bryte plass er ikke verdens ende, men du må være forsiktig. Ved hjelp av disse inline HTML mellomrom alternativer kan være en glatt skråning. Mens en eller to ikke kan skade nettstedet ditt, hvis du fortsetter ned den banen, vil du introdusere problemer på sidene dine. Til slutt er det bedre å vende seg til CSS for HTML-avstand, og alle andre websidenes visuelle behov.
