Deze handleiding leert u de procedure om ruimte te creëren tussen twee schakels.
Laten we beginnen!
Hoe ruimte te geven tussen twee links in HTML en CSS?
Om ruimte tussen twee links te geven, voegt u eerst de vereiste links toe aan het HTML-bestand.
Stap 1: Koppelingen toevoegen in HTML
In HTML zullen we een container maken met behulp van de
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Hoe maak je een HTML-bestand aan? < / a >
< a href = “https://linuxhint.com/edit-html-file/” > Hoe een HTML-bestand bewerken? < / a >
< / div >
De volgende afbeelding laat zien dat de links succesvol zijn toegevoegd:
Stap 2: Style de Div & Link
Stijl in deze stap de div en link met ' div ” in CSS. We zullen de opvulling aanpassen aan ' 40px ” en stel de lettergrootte van de links in als “ groter ”, is de hoogte van de div ingesteld als “ 150px ” en gebruik de background property en stel de kleur van de div in als “ zwart ”. Pas daarna de randbreedte aan als ' 5px ”, stijl als “ gestreept ” en kleur als “ RGB(251, 255, 0) ”.
CSS
div {opvulling : 40px ;
lettertypegrootte : groter ;
hoogte : 150px ;
achtergrond : zwart ;
grens : 5px gestreept rgb ( 251 , 255 , 0 ) ;
}
Met behulp van de bovenstaande code wordt de volgende uitvoer verkregen. Zoals je kunt zien, zijn zowel de div als de links gestyled:
Stap 3: Geef horizontaal ruimte tussen twee links
We kunnen ruimte tussen twee links horizontaal geven door HTML en CSS te gebruiken. Hier zullen we beide methoden één voor één uitleggen.
Methode 1: HTML gebruiken
Om ruimte tussen de links te geven zonder externe CSS te schrijven, kunt u ' ” in de HTML waar u ruimte wilt maken. “ ” staat voor non-breaking space. In het HTML-bestand betekent het toevoegen van één één spatie. Als u meer ruimte wilt geven, heeft het niet de voorkeur om handmatig toe te voegen volgens het vereiste aantal spaties.
Laten we naar het voorbeeld gaan om het genoemde concept te begrijpen!
Voorbeeld
Hier zullen we vier keer schrijven ' ” om ruimte te creëren na de eerste link op zo'n manier dat de tweede link na de vier spaties zal verschijnen.
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Hoe maak je een HTML-bestand aan? < / a >
Hoe een HTML-bestand bewerken?
Zoals je kunt zien, wordt er aan de rechterkant van de eerste link ruimte gemaakt:
Methode 2: CSS gebruiken
In CSS gebruiken we de “ marge-rechts ” eigenschap om ruimte te geven tussen twee links. De ' marge-rechts ” eigenschap wordt gebruikt om ruimte toe te voegen vanaf de rechterkant van het element. U kunt er ook de negatieve waarden voor aangeven.
Syntaxis
De syntaxis van de eigenschap margin-right wordt hieronder gegeven:
marge-rechts : waardeIn plaats van ' waarde ”, stel de marge in vanaf de rechterkant van het element. Laten we doorgaan met het voorbeeld.
Voorbeeld
Hier gebruiken we ' a ” om toegang te krijgen tot de link die we in de HTML hebben gemaakt. Stel vervolgens de waarde van de eigenschap margin-right in als ' 50px ”:
a {marge-rechts : 50px ;
}
Er wordt ruimte gemaakt vanaf de rechterkant van de eerste link, die hieronder te zien is:
Stap 4: Geef verticaal ruimte tussen twee links
Om verticale ruimte tussen twee links te geven, lijnt u eerst de links in verticale vorm uit. Dit wordt gedaan met behulp van de ' blok ” waarde van de “ Scherm ” eigenschap en gebruik vervolgens de “ lijnhoogte ” eigenschap om ruimte te geven tussen twee verbindingslijnen.
Voorbeeld:
Hier zullen we de waarde van de display-eigenschap instellen als ' blok ” om links verticaal uit te lijnen. Geef vervolgens de ruimte tussen twee koppelingen door de waarde van de eigenschap line-height in te stellen als ' 80px ”:
a {Scherm : blok ;
lijnhoogte : 80px ;
}
Zoals u kunt zien, wordt de ruimte gemaakt met behulp van de eigenschap line-height:
Dat is het! We hebben de methode uitgelegd om ruimte te geven tussen twee links in HTML & CSS.
Conclusie
De ' ”, “ marge-rechts ', en ' lijnhoogte ” eigenschappen van CSS worden gebruikt om horizontale en verticale ruimte tussen twee links te geven. Hiermee kunt u de ruimte aan de rechter- en linkerkant van de links aanpassen. In dit artikel hebben we de procedure uitgelegd om ruimte tussen twee links te geven met behulp van twee verschillende methoden en hebben we gerelateerde voorbeelden gegeven.