Hvordan gi plass mellom to lenker i HTML & CSS?

I HTML er lenker hyperkoblinger som kan føre deg til andre nettsteder. Koblinger kobler vanligvis nettressurser, for eksempel bilder, videoer, PDF -filer eller websider. HTML bruker "”Tag for å opprette lenker ved å spesifisere URL og koble tekst. Når du legger til to lenker i HTML, som standard, plasseres de side om side uten plass.

Denne håndboken vil lære deg prosedyren for å skape mellomrom mellom to lenker.

La oss komme i gang!

Hvordan gi plass mellom to lenker i HTML & CSS?

For å gi plass mellom to lenker, først og fremst, legg til de nødvendige koblingene i HTML -filen.

Trinn 1: Legg til lenker i HTML

I HTML oppretter vi en beholder ved hjelp av taggen og to lenker ved hjelp av taggen. Her brukes en hyperkoblingsreferanse for å oppgi nettstedets adresse og for å gi den nødvendige hyperkoblingen. I tillegg til adressen, spesifiser lenkenes navn fordi lenken ikke vises på nettstedet. Det vil bare vise navnet eller bildeteksten vi tildeler.

Html

Hvordan lage en HTML -fil?
Hvordan redigere en HTML -fil?

Følgende bilde viser at koblingene er lagt til vellykket:

Trinn 2: Style the Div & Link

I dette trinnet kan du style div og lenke ved å bruke "div”I CSS. Vi vil justere polstringen til “40px”Og angi skriftstørrelsen på lenkene som“større”, Høyden på div er satt som“150px”Og bruk bakgrunnsegenskapen og sett fargen på div som“svart”. Etter det, juster grensebredden som “5px”, Stil som“Strikket”Og farge som“RGB (251, 255, 0)”.

CSS

div
polstring: 40px;
Fontstørrelse: større;
Høyde: 150px;
Bakgrunn: svart;
Grense: 5px stiplet RGB (251, 255, 0);

Ved hjelp av koden over oppnås følgende utgang. Som du kan se, er både DIV og koblingene stylet:

Trinn 3: Gi rom mellom to koblinger horisontalt

Vi kan gi plass mellom to koblinger horisontalt ved å bruke HTML og CSS. Her vil vi forklare begge metodene en etter en.

Metode 1: Bruke HTML

For å gi plass mellom lenkene uten å skrive noen eksterne CSS, kan du bruke “”I HTML der du vil skape plass. “”Står for ikke-brytende plass. I HTML -filen betyr det å legge til ett rom. Hvis du vil gi mer plass, er det ikke å foretrekke å legge til i henhold til det nødvendige antall mellomrom manuelt.

La oss flytte til eksemplet for å forstå det uttalte konseptet!

Eksempel

Her vil vi skrive fire ganger “”For å skape plass etter den første lenken på en slik måte at den andre lenken vises etter de fire områdene.

Html

Hvordan lage en HTML -fil?
Hvordan redigere en HTML -fil?

Som du ser, opprettes plass på høyre side av den første lenken:

Metode 2: Bruke CSS

I CSS vil vi bruke "margin-høyre”Eiendom for å gi plass mellom to lenker. “margin-høyre”Eiendom brukes til å legge til plass fra høyre side av elementet. Du kan også angi de negative verdiene for det.

Syntaks

Syntaks for margin-høyre egenskap er gitt nedenfor:

Margin-høyre: verdi

I 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. Deretter setter du verdien av margin-høyre eiendom som "50px”:

en
Margin-høyre: 50px;

Plass er opprettet fra høyre side av den første lenken, som kan sees nedenfor:

Trinn 4: Gi plass mellom to koblinger vertikalt

For å gi vertikalt rom mellom to koblinger, juster du først koblinger i vertikal form. Dette vil bli gjort ved å bruke “blokkere”Verdien av“vise”Eiendom og deretter bruke“linjehøyde”Eiendom for å gi plass mellom to koblingslinjer.

Eksempel:

Her vil vi sette verdien av displayegenskapen som “blokkere”For å justere koblinger vertikalt. Gi deretter plassen mellom to lenker ved å sette verdien av linjehøyde eiendom som "80px”:

en
Display: Block;
linjehøyde: 80px;

Som du kan se, opprettes plassen ved hjelp av egenskapen til linjehøyde:

Det er det! Vi har forklart metoden for å gi rom mellom to lenker i HTML & CSS.

Konklusjon

“”,“margin-høyre”, Og“linjehøyde”Egenskaper til CSS brukes til å gi horisontalt og vertikalt rom mellom to koblinger. Ved å bruke dette kan du justere plassen fra høyre og venstre side av lenkene. I denne artikkelen har vi forklart prosedyren for å gi plass mellom to koblinger ved hjelp av to forskjellige metoder og gitt relaterte eksempler.