Aquest manual us ensenyarà el procediment per crear espai entre dos enllaços.
Comencem!
Com donar espai entre dos enllaços en HTML i CSS?
Per donar espai entre dos enllaços, primer de tot, afegiu els enllaços necessaris al fitxer HTML.
Pas 1: afegiu enllaços en HTML
En HTML, crearem un contenidor amb l'etiqueta
HTML
< div >< a href = 'https://linuxhint.com/create-html-file/' > Com crear un fitxer HTML? < / a >
< a href = 'https://linuxhint.com/edit-html-file/' > Com editar un fitxer HTML? < / a >
< / div >
La imatge següent mostra que els enllaços s'han afegit correctament:
Pas 2: estilitzar el Div & Link
En aquest pas, estileu el div i l'enllaç amb ' div ” en CSS. Ajustarem el farciment a ' 40 píxels ” i establiu la mida de la lletra dels enllaços com a “ més gran ”, l'alçada del div s'estableix com a “ 150 píxels ” i utilitzeu la propietat de fons i establiu el color del div com a “ negre ”. Després d'això, ajusteu l'amplada de la vora com a ' 5 píxels ”, estil com “ puntejat ' i el color com ' rgb(251, 255, 0) ”.
CSS
div {farciment : 40 píxels ;
mida de la font : més gran ;
alçada : 150 píxels ;
fons : negre ;
frontera : 5 píxels puntejat rgb ( 251 , 255 , 0 ) ;
}
Utilitzant el codi anterior, s'obté la següent sortida. Com podeu veure, tant el div com els enllaços tenen un estil:
Pas 3: doneu espai entre dos enllaços horitzontalment
Podem donar espai entre dos enllaços horitzontalment utilitzant HTML i CSS. Aquí, explicarem els dos mètodes un per un.
Mètode 1: Ús d'HTML
Per donar espai entre els enllaços sense escriure cap CSS extern, podeu utilitzar ' ” a l'HTML on voleu crear espai. “ ” significa espai ininterromput. Al fitxer HTML, afegir un significa un espai. Si voleu donar més espai, no és preferible afegir manualment segons el nombre d'espais necessari.
Passem a l'exemple per entendre el concepte indicat!
Exemple
Aquí, escriurem quatre vegades ' ” per crear un espai després del primer enllaç de tal manera que el segon enllaç apareixerà després dels quatre espais.
HTML
< div >< a href = 'https://linuxhint.com/create-html-file/' > Com crear un fitxer HTML? < / a >
Com editar un fitxer HTML?
Com podeu veure, l'espai es crea a la part dreta del primer enllaç:
Mètode 2: Ús de CSS
En CSS, utilitzarem el ' marge-dreta ” propietat per donar espai entre dos enllaços. El ' marge-dreta La propietat s'utilitza per afegir espai des del costat dret de l'element. També podeu establir-ne els valors negatius.
Sintaxi
La sintaxi de la propietat margin-right es mostra a continuació:
marge-dreta : valorEn el lloc de ' valor ”, estableix el marge des del costat dret de l'element. Continuem amb l'exemple.
Exemple
Aquí, farem servir ' a ” per accedir a l'enllaç que hem creat a l'HTML. A continuació, establiu el valor de la propietat del marge dret com a ' 50 píxels ”:
a {marge-dreta : 50 píxels ;
}
L'espai es crea des del costat dret del primer enllaç, que es pot veure a continuació:
Pas 4: doneu espai entre dos enllaços verticalment
Per donar espai vertical entre dos enllaços, primer alineeu els enllaços en forma vertical. Això es farà utilitzant el ' bloc ' valor de ' visualització ' i després utilitzant la propietat ' alçada de línia ” propietat per donar espai entre dues línies d'enllaç.
Exemple:
Aquí, establirem el valor de la propietat de visualització com a ' bloc ” per alinear els enllaços verticalment. A continuació, doneu l'espai entre dos enllaços establint el valor de la propietat d'alçada de línia com a ' 80 píxels ”:
a {visualització : bloc ;
alçada de línia : 80 píxels ;
}
Com podeu veure, l'espai es crea mitjançant la propietat line-height:
Això és! Hem explicat el mètode per donar espai entre dos enllaços en HTML i CSS.
Conclusió
El ' ”, “ marge-dreta ”, i “ alçada de línia Les propietats de CSS s'utilitzen per donar espai horitzontal i vertical entre dos enllaços. Amb això, podeu ajustar l'espai dels costats dret i esquerre dels enllaços. En aquest article, hem explicat el procediment per donar espai entre dos enllaços mitjançant dos mètodes diferents i hem proporcionat exemples relacionats.