Questo manuale ti insegnerà la procedura per creare spazio tra due collegamenti.
Iniziamo!
Come dare spazio tra due collegamenti in HTML e CSS?
Per dare spazio tra due collegamenti, prima di tutto aggiungi i collegamenti richiesti nel file HTML.
Passaggio 1: aggiungi collegamenti in HTML
In HTML creeremo un contenitore usando il tag
HTML
< div >< un href = “https://linuxhint.com/create-html-file/” > Come creare un file HTML? < / un >
< un href = “https://linuxhint.com/edit-html-file/” > Come modificare un file HTML? < / un >
< / div >
L'immagine seguente mostra che i collegamenti sono stati aggiunti correttamente:
Passaggio 2: modella il Div & Link
In questo passaggio, modella il div e collega usando ' div ” in CSS. Adegueremo l'imbottitura a ' 40px ' e imposta la dimensione del carattere dei collegamenti come ' più grandi ”, l'altezza del div è impostata come “ 150px ' e usa la proprietà background e imposta il colore del div come ' Nero ”. Successivamente, regola la larghezza del bordo come ' 5px ”, stile come “ tratteggiato ' e colora come ' RGB(251, 255, 0) ”.
CSS
div {imbottitura : 40px ;
dimensione del font : più grandi ;
altezza : 150px ;
sfondo : Nero ;
confine : 5px tratteggiato rgb ( 251 , 255 , 0 ) ;
}
Utilizzando il codice sopra, si ottiene il seguente output. Come puoi vedere, sia il div che i link hanno uno stile:
Passaggio 3: dai spazio tra due collegamenti orizzontalmente
Possiamo dare spazio tra due collegamenti orizzontalmente usando HTML e CSS. Qui, spiegheremo entrambi i metodi uno per uno.
Metodo 1: utilizzo di HTML
Per dare spazio tra i link senza scrivere alcun CSS esterno, puoi usare “ ” nell'HTML in cui si desidera creare spazio. “ ” sta per spazio unificatore. Nel file HTML, l'aggiunta di un significa uno spazio. Se vuoi dare più spazio, non è preferibile aggiungere manualmente in base al numero di spazi richiesto.
Passiamo all'esempio per capire il concetto affermato!
Esempio
Qui, scriveremo quattro volte “ ” per creare spazio dopo il primo collegamento in modo tale che il secondo collegamento appaia dopo i quattro spazi.
HTML
< div >< un href = “https://linuxhint.com/create-html-file/” > Come creare un file HTML? < / un >
Come modificare un file HTML?
Come puoi vedere, lo spazio viene creato sul lato destro del primo collegamento:
Metodo 2: utilizzo dei CSS
In CSS, useremo il ' margine-destra ” proprietà per dare spazio tra due collegamenti. Il ' margine-destra La proprietà ” viene utilizzata per aggiungere spazio dal lato destro dell'elemento. Puoi anche impostare i valori negativi per esso.
Sintassi
La sintassi della proprietà margin-right è riportata di seguito:
margine-destra : valoreAl posto di ' valore ”, imposta il margine dal lato destro dell'elemento. Continuiamo l'esempio.
Esempio
Qui useremo “ un ” per accedere al collegamento che abbiamo creato nell'HTML. Quindi, imposta il valore della proprietà margin-right come ' 50px ”:
un {margine-destra : 50px ;
}
Lo spazio viene creato dal lato destro del primo collegamento, che può essere visto di seguito:
Passaggio 4: dai spazio tra due collegamenti in verticale
Per dare spazio verticale tra due collegamenti, allineare prima i collegamenti in forma verticale. Questo sarà fatto usando il ' bloccare ” valore del “ Schermo ” e quindi utilizzando la “ altezza della linea ” per dare spazio tra due linee di collegamento.
Esempio:
Qui imposteremo il valore della proprietà display come ' bloccare ” per allineare i collegamenti verticalmente. Quindi, dai lo spazio tra due collegamenti impostando il valore della proprietà line-height come ' 80px ”:
un {Schermo : bloccare ;
altezza della linea : 80px ;
}
Come puoi vedere, lo spazio viene creato usando la proprietà line-height:
Questo è tutto! Abbiamo spiegato il metodo per dare spazio tra due collegamenti in HTML e CSS.
Conclusione
Il ' ”, “ margine-destra ', e ' altezza della linea Le proprietà dei CSS vengono utilizzate per dare spazio orizzontale e verticale tra due collegamenti. Usando questo, puoi regolare lo spazio dai lati destro e sinistro dei collegamenti. In questo articolo, abbiamo spiegato la procedura per dare spazio tra due collegamenti utilizzando due metodi diversi e fornito esempi correlati.