Denne håndboken vil lære deg fremgangsmåten for å skape plass mellom to lenker.
La oss komme i gang!
Hvordan gi plass mellom to lenker i HTML og CSS?
For å gi plass mellom to lenker, legg først til de nødvendige koblingene i HTML-filen.
Trinn 1: Legg til lenker i HTML
I HTML vil vi lage en beholder ved å bruke
HTML
< div >< en href = 'https://linuxhint.com/create-html-file/' > Hvordan lage en HTML-fil? < / en >
< en href = 'https://linuxhint.com/edit-html-file/' > Hvordan redigere en HTML-fil? < / en >
< / div >
Følgende bilde viser at koblingene er lagt til:
Trinn 2: Style Div & Link
I dette trinnet stiler du div og lenke ved å bruke ' div ' i CSS. Vi vil justere polstringen til ' 40 piksler ' og angi skriftstørrelsen på lenkene som ' større ', er høyden på div satt som ' 150 piksler ' og bruk bakgrunnsegenskapen og sett fargen på div som ' svart '. Deretter justerer du kantbredden som ' 5 px ', stil som ' stiplet ' og farge som ' rgb(251; 255; 0) '.
CSS
div {polstring : 40 piksler ;
skriftstørrelse : større ;
høyde : 150 piksler ;
bakgrunn : svart ;
grense : 5 px stiplet rgb ( 251 , 255 , 0 ) ;
}
Ved å bruke koden ovenfor oppnås følgende utgang. Som du kan se, er både div og lenkene stylet:
Trinn 3: Gi plass mellom to lenker horisontalt
Vi kan gi plass mellom to lenker horisontalt ved å bruke HTML og CSS. Her vil vi forklare begge metodene én etter én.
Metode 1: Bruk HTML
For å gi plass mellom lenkene uten å skrive noen ekstern CSS, kan du bruke ' ” i HTML-en der du vil opprette plass. ' ” står for non-breaking space. I HTML-filen betyr å legge til én én plass. Hvis du ønsker å gi mer plass, er det ikke å foretrekke å manuelt legge til i henhold til nødvendig antall mellomrom.
La oss gå til eksemplet for å forstå det uttalte konseptet!
Eksempel
Her vil vi skrive fire ganger ' ” for å opprette plass etter den første lenken på en slik måte at den andre lenken vises etter de fire mellomrommene.
HTML
< div >< en href = 'https://linuxhint.com/create-html-file/' > Hvordan lage en HTML-fil? < / en >
Hvordan redigerer jeg en HTML-fil?
Som du kan se, opprettes plass på høyre side av den første lenken:
Metode 2: Bruk av CSS
I CSS vil vi bruke ' marg-høyre ” egenskap for å gi plass mellom to ledd. « marg-høyre ”-egenskapen brukes til å legge til plass fra høyre side av elementet. Du kan også angi de negative verdiene for den.
Syntaks
Syntaksen til margin-right-egenskapen er gitt nedenfor:
marg-høyre : verdiI stedet for ' verdi ”, sett margen fra høyre side av elementet. La oss fortsette eksemplet.
Eksempel
Her vil vi bruke ' en ' for å få tilgang til lenken vi har opprettet i HTML-en. Deretter setter du verdien av margin-right-egenskapen som ' 50 piksler ':
en {marg-høyre : 50 piksler ;
}
Plass er opprettet fra høyre side av den første lenken, som kan sees nedenfor:
Trinn 4: Gi plass mellom to lenker vertikalt
For å gi vertikal plass mellom to lenker, må du først justere lenker i vertikal form. Dette gjøres ved å bruke ' blokkere ' verdien av ' vise '-egenskapen og deretter bruke ' linjehøyde ” egenskap for å gi plass mellom to lenkelinjer.
Eksempel:
Her vil vi sette verdien til visningsegenskapen som ' blokkere ' for å justere lenker vertikalt. Deretter gir du mellomrommet mellom to koblinger ved å sette verdien av line-height-egenskapen som ' 80 piksler ':
en {vise : blokkere ;
linjehøyde : 80 piksler ;
}
Som du kan se, opprettes plassen ved å bruke line-height-egenskapen:
Det er det! Vi har forklart metoden for å gi plass mellom to lenker i HTML og CSS.
Konklusjon
« ', ' marg-høyre ', og ' linjehøyde ” egenskapene til CSS brukes til å gi horisontal og vertikal plass mellom to lenker. Ved å bruke dette kan du justere mellomrommet fra høyre og venstre side av lenkene. I denne artikkelen har vi forklart fremgangsmåten for å gi plass mellom to lenker ved å bruke to forskjellige metoder og gitt relaterte eksempler.