Den här manualen kommer att lära dig hur du skapar utrymme mellan två länkar.
Låt oss börja!
Hur ger man utrymme mellan två länkar i HTML och CSS?
För att ge utrymme mellan två länkar, lägg först och främst till de nödvändiga länkarna i HTML-filen.
Steg 1: Lägg till länkar i HTML
I HTML kommer vi att skapa en behållare med
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Hur skapar man en HTML-fil? < / a >
< a href = 'https://linuxhint.com/edit-html-file/' > Hur redigerar man en HTML-fil? < / a >
< / div >
Följande bild visar att länkarna har lagts till:
Steg 2: Style Div & Link
I det här steget stilar du div och länk med ' div ” i CSS. Vi kommer att justera stoppningen till ' 40px ' och ställ in teckenstorleken på länkarna som ' större ', höjden på div är inställd som ' 150 pixlar ” och använd bakgrundsegenskapen och ställ in färgen på div som ” svart ”. Efter det, justera kantbredden som ' 5 px ', stil som ' streckade ' och färga som ' rgb(251, 255, 0) ”.
CSS
div {stoppning : 40px ;
textstorlek : större ;
höjd : 150 pixlar ;
bakgrund : svart ;
gräns : 5 px streckade rgb ( 251 , 255 , 0 ) ;
}
Med hjälp av koden ovan erhålls följande utdata. Som du kan se är både div och länkarna utformade:
Steg 3: Ge utrymme mellan två länkar horisontellt
Vi kan ge utrymme mellan två länkar horisontellt genom att använda HTML och CSS. Här kommer vi att förklara båda metoderna en efter en.
Metod 1: Använd HTML
För att ge utrymme mellan länkarna utan att skriva någon extern CSS kan du använda ' ” i HTML-koden där du vill skapa utrymme. ' ” står för non-breaking space. I HTML-filen betyder att lägga till en ett blanksteg. Om du vill ge mer utrymme är det inte att föredra att manuellt lägga till enligt det antal utrymmen som krävs.
Låt oss gå till exemplet för att förstå det angivna konceptet!
Exempel
Här kommer vi att skriva fyra gånger ' ” för att skapa utrymme efter den första länken på ett sådant sätt att den andra länken kommer att visas efter de fyra mellanslagen.
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Hur skapar man en HTML-fil? < / a >
Hur redigerar man en HTML-fil?
Som du kan se skapas utrymme på höger sida av den första länken:
Metod 2: Använda CSS
I CSS kommer vi att använda ' marginal-höger ” egenskap för att ge utrymme mellan två länkar. den ' marginal-höger ”-egenskapen används för att lägga till utrymme från höger sida av elementet. Du kan också ange negativa värden för den.
Syntax
Syntaxen för egenskapen margin-right ges nedan:
marginal-höger : värdeI stället för ' värde ”, ställ in marginalen från höger sida av elementet. Låt oss fortsätta exemplet.
Exempel
Här kommer vi att använda ' a ” för att komma åt länken vi har skapat i HTML-koden. Ställ sedan in värdet för marginal-right-egenskapen som ' 50 px ”:
a {marginal-höger : 50 px ;
}
Utrymme skapas från höger sida av den första länken, som kan ses nedan:
Steg 4: Ge utrymme mellan två länkar vertikalt
För att ge vertikalt utrymme mellan två länkar, rikta först länkarna i vertikal form. Detta kommer att göras genom att använda ' blockera ' värdet av ' visa '-egenskapen och sedan använda ' radavstånd ” egenskap för att ge utrymme mellan två länklinjer.
Exempel:
Här kommer vi att ställa in värdet för visningsegenskapen som ' blockera ” för att justera länkar vertikalt. Ge sedan utrymmet mellan två länkar genom att ställa in värdet för line-height-egenskapen som ' 80px ”:
a {visa : blockera ;
radavstånd : 80px ;
}
Som du kan se skapas utrymmet med egenskapen line-height:
Det är allt! Vi har förklarat metoden för att ge utrymme mellan två länkar i HTML & CSS.
Slutsats
den ' ”, “ marginal-höger ', och ' radavstånd ” egenskaper hos CSS används för att ge horisontellt och vertikalt utrymme mellan två länkar. Med detta kan du justera utrymmet från höger och vänster sida av länkarna. I den här artikeln har vi förklarat proceduren för att ge utrymme mellan två länkar med två olika metoder och tillhandahållit relaterade exempel.