Denne manual vil lære dig proceduren til at skabe plads mellem to links.
Lad os komme igang!
Hvordan giver man plads mellem to links i HTML og CSS?
For at give plads mellem to links, skal du først og fremmest tilføje de nødvendige links i HTML-filen.
Trin 1: Tilføj links i HTML
I HTML opretter vi en container ved hjælp af
HTML
< div >< -en href = 'https://linuxhint.com/create-html-file/' > Hvordan opretter man en HTML-fil? < / -en >
< -en href = 'https://linuxhint.com/edit-html-file/' > Hvordan redigerer man en HTML-fil? < / -en >
< / div >
Følgende billede viser, at linkene er blevet tilføjet med succes:
Trin 2: Style Div & Link
I dette trin skal du style div'en og linket med ' div ” i CSS. Vi vil justere polstringen til ' 40 px ' og indstil skriftstørrelsen på linkene som ' større ', er højden af div indstillet som ' 150 px ' og brug baggrundsegenskaben og indstil farven på div'en som ' sort ”. Juster derefter kantbredden som ' 5 px ', stil som ' stiplet ' og farve som ' rgb(251, 255, 0) ”.
CSS
div {polstring : 40 px ;
skriftstørrelse : større ;
højde : 150 px ;
baggrund : sort ;
grænse : 5 px stiplet rgb ( 251 , 255 , 0 ) ;
}
Ved at bruge koden ovenfor opnås følgende output. Som du kan se, er både div og links stylet:
Trin 3: Giv plads mellem to links vandret
Vi kan give plads mellem to links vandret ved at bruge HTML og CSS. Her vil vi forklare begge metoder en efter en.
Metode 1: Brug af HTML
For at give plads mellem linkene uden at skrive nogen ekstern CSS, kan du bruge ' ” i HTML, hvor du vil skabe plads. “ ” står for non-breaking space. Tilføjelse af en i HTML-filen betyder et mellemrum. Hvis du ønsker at give mere plads, er det ikke at foretrække manuelt at tilføje i henhold til det nødvendige antal pladser.
Lad os gå til eksemplet for at forstå det angivne koncept!
Eksempel
Her vil vi skrive fire gange ' ” for at skabe plads efter det første link på en sådan måde, at det andet link vises efter de fire mellemrum.
HTML
< div >< -en href = 'https://linuxhint.com/create-html-file/' > Hvordan opretter man en HTML-fil? < / -en >
Hvordan redigerer man en HTML-fil?
Som du kan se, oprettes plads i højre side af det første link:
Metode 2: Brug af CSS
I CSS vil vi bruge ' margin-højre ” egenskab for at give plads mellem to led. Det ' margin-højre ” egenskaben bruges til at tilføje plads fra højre side af elementet. Du kan også angive de negative værdier for den.
Syntaks
Syntaksen for margin-right-egenskaben er angivet nedenfor:
margin-højre : værdiI stedet for ' værdi ”, skal du indstille margenen fra højre side af elementet. Lad os fortsætte eksemplet.
Eksempel
Her vil vi bruge ' -en ” for at få adgang til det link, vi har oprettet i HTML. Indstil derefter værdien af margin-right-egenskaben som ' 50 px ”:
-en {margin-højre : 50 px ;
}
Pladsen skabes fra højre side af det første link, som kan ses nedenfor:
Trin 4: Giv plads mellem to links lodret
For at give lodret mellemrum mellem to led, skal du først justere links i lodret form. Dette vil blive gjort ved at bruge ' blok ' værdien af ' Skærm ' egenskab og derefter bruge ' linjehøjde ” egenskab for at give plads mellem to linklinjer.
Eksempel:
Her vil vi indstille værdien af visningsegenskaben som ' blok ” for at justere links lodret. Giv derefter mellemrummet mellem to links ved at indstille værdien af line-height-egenskaben som ' 80 px ”:
-en {Skærm : blok ;
linjehøjde : 80 px ;
}
Som du kan se, oprettes rummet ved hjælp af egenskaben linjehøjde:
Det er det! Vi har forklaret metoden til at give plads mellem to links i HTML & CSS.
Konklusion
Det ' ', ' margin-højre ', og ' linjehøjde ” egenskaber for CSS bruges til at give vandret og lodret mellemrum mellem to links. Ved at bruge dette kan du justere mellemrummet fra højre og venstre side af linkene. I denne artikel har vi forklaret proceduren for at give plads mellem to links ved hjælp af to forskellige metoder og givet relaterede eksempler.