Come dare spazio tra due collegamenti in HTML e CSS?

In HTML, i collegamenti sono collegamenti ipertestuali che possono portarti ad altri siti. I collegamenti di solito collegano risorse Web, come immagini, video, file PDF o pagine Web. HTML usa il “"Tag per creare collegamenti specificando l'URL e collegando il testo. Quando si aggiungono due collegamenti nell'HTML, per impostazione predefinita, vengono posizionati fianco a fianco senza spazio.

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 utilizzando il tag e due collegamenti con l'aiuto del tag. Qui, viene utilizzato un riferimento ipertestuale per fornire l'indirizzo del sito e per fornire il collegamento ipertestuale richiesto. Oltre all'indirizzo, specificare il nome del collegamento perché il collegamento non viene visualizzato sul sito Web. Verrà solo il nome o la didascalia che assegniamo.

Html

Come creare un file HTML?
Come modificare un file HTML?

La seguente immagine mostra che i collegamenti sono stati aggiunti correttamente:

Passaggio 2: modella il div e il link

In questo passaggio, modella il div e il collegamento usando "div"In CSS. Adatteremo 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à di sfondo e imposta il colore del div come"nero". Successivamente, regola la larghezza del bordo come "5px", Stile come"tratteggiato"E colore come"RGB (251, 255, 0)".

CSS

div
imbottitura: 40px;
Font-size: più grande;
Altezza: 150px;
Sfondo: nero;
Bordo: 5px RGB tratteggiato (251, 255, 0);

Utilizzando il codice sopra, si ottiene il seguente output. Come puoi vedere, sia il Div che i collegamenti sono in stile:

Passaggio 3: dare spazio tra due collegamenti in orizzontale

Possiamo dare spazio tra due collegamenti in orizzontale usando HTML e CSS. Qui spiegheremo entrambi i metodi uno per uno.

Metodo 1: usando HTML

Per dare spazio tra i collegamenti senza scrivere CSS esterni, puoi usare ""Nell'HTML dove si desidera creare spazio. ""Sta per uno spazio non di rottura. Nel file HTML, aggiungendo uno significa uno spazio. Se vuoi dare più spazio, non è preferibile aggiungere manualmente in base al numero richiesto di spazi.

Passiamo all'esempio per capire il concetto dichiarato!

Esempio

Qui, scriveremo quattro volte ""Per creare spazio dopo il primo collegamento in modo tale che il secondo collegamento apparirà dopo i quattro spazi.

Html

Come creare un file HTML?
Come modificare un file HTML?

Come puoi vedere, lo spazio viene creato sul lato destro del primo link:

Metodo 2: usando 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 questo.

Sintassi

La sintassi della proprietà margin-destra è riportata di seguito:

margine-destra: valore

Al posto di "valore", Imposta il margine dal lato destro dell'elemento. Continuiamo l'esempio.

Esempio

Qui, useremo "UN"Per accedere al link che abbiamo creato nell'HTML. Successivamente, imposta il valore della proprietà margin-destra come "50px":

UN
margine-destra: 50px;

Lo spazio viene creato dal lato destro del primo collegamento, che può essere visto di seguito:

Passaggio 4: dare spazio tra due collegamenti in verticale

Per dare spazio verticale tra due collegamenti, allineare prima i collegamenti in forma verticale. Questo verrà fatto usando il "bloccare"Valore del"Schermo"Proprietà e quindi usando il"altezza della linea"Proprietà per dare spazio tra due linee di collegamento.

Esempio:

Qui, imposteremo il valore della proprietà di visualizzazione come "bloccare"Per allineare i collegamenti in verticale. Quindi, dare lo spazio tra due collegamenti impostando il valore della proprietà della linea di linea come "80px":

UN
blocco di visualizzazione;
linea di linea: 80px;

Come puoi vedere, lo spazio viene creato utilizzando la proprietà della linea:

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 CS vengono utilizzate per dare spazio orizzontale e verticale tra due collegamenti. Usando questo, è possibile 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.