See juhend õpetab teile, kuidas kahe lingi vahele ruumi luua.
Alustame!
Kuidas HTML-is ja CSS-is kahe lingi vahele ruumi jätta?
Kahe lingi vahele ruumi jätmiseks lisage kõigepealt vajalikud lingid HTML-faili.
1. samm: lisage linke HTML-i
HTML-is loome konteineri, kasutades märgendit
HTML
< div >< a href = 'https://linuxhint.com/create-html-file/' > Kuidas luua HTML-faili? < / a >
< a href = 'https://linuxhint.com/edit-html-file/' > Kuidas HTML-faili redigeerida? < / a >
< / div >
Järgmine pilt näitab, et linkide lisamine õnnestus:
2. samm: stiilige Div & Link
Selles etapis stiilige div ja link kasutades ' div ” CSS-is. Reguleerime polstri väärtuseks ' 40 pikslit ' ja määrake linkide fondi suuruseks ' suurem ”, on lahtri kõrguseks määratud 150 pikslit ' ja kasutage tausta atribuuti ja määrake div värviks ' must ”. Pärast seda reguleerige äärise laiust järgmiselt 5 pikslit ”, stiil kui „ katkendlik ” ja värvi nagu „ rgb(251, 255, 0) ”.
CSS
div {polsterdus : 40 pikslit ;
fondi suurus : suurem ;
kõrgus : 150 pikslit ;
taustal : must ;
piir : 5 pikslit katkendlik rgb ( 251 , 255 , 0 ) ;
}
Kasutades ülaltoodud koodi, saadakse järgmine väljund. Nagu näete, on nii div kui ka lingid stiilis:
3. samm: jätke kahe lingi vahele horisontaalselt ruumi
Kahe lingi vahele saame horisontaalselt ruumi jätta, kasutades HTML-i ja CSS-i. Siin selgitame mõlemat meetodit ükshaaval.
1. meetod: HTML-i kasutamine
Kui soovite linkide vahele ruumi jätta ilma välist CSS-i kirjutamata, võite kasutada ' ” HTML-is, kuhu soovite ruumi luua. “ ” tähistab mittemurduvat ruumi. HTML-failis tähendab ühe lisamine ühte tühikut. Kui soovite anda rohkem ruumi, ei ole eelistatav käsitsi lisada vastavalt vajalikule arvule tühikutele.
Liigume esitatud kontseptsiooni mõistmiseks näite juurde!
Näide
Siin kirjutame neli korda ' ” esimese lingi järel tühiku loomiseks nii, et nelja tühiku järel ilmub teine link.
HTML
< div >< a href = 'https://linuxhint.com/create-html-file/' > Kuidas luua HTML-faili? < / a >
Kuidas HTML-faili muuta?
Nagu näete, luuakse ruum esimese lingi paremale küljele:
2. meetod: CSS-i kasutamine
CSS-is kasutame ' margin-parem ” omadus, et jätta kahe lingi vahele ruumi. ' margin-parem ” atribuuti kasutatakse ruumi lisamiseks elemendi paremalt küljelt. Samuti saate selle jaoks määrata negatiivsed väärtused.
Süntaks
Allpool on toodud marginaaliõiguse atribuudi süntaks:
margin-parem : väärtus' asemel väärtus ”, määrake veeris elemendi paremalt küljelt. Jätkame näitega.
Näide
Siin kasutame ' a ', et pääseda juurde HTML-is loodud lingile. Järgmisena määrake marginaaliõiguse atribuudi väärtuseks ' 50 pikslit ”:
a {margin-parem : 50 pikslit ;
}
Ruum luuakse esimese lingi paremalt küljelt, mida näete allpool:
4. samm: jätke kahe lingi vahele vertikaalselt ruumi
Kahe lingi vahele vertikaalse ruumi andmiseks joondage lingid esmalt vertikaalsel kujul. Seda tehakse kasutades ' blokk '' väärtus kuva ' atribuuti ja seejärel kasutades ' reakõrgus ” omadus, et jätta kahe lingirea vahele ruumi.
Näide:
Siin määrame kuvatava atribuudi väärtuseks ' blokk ” linkide vertikaalseks joondamiseks. Seejärel jätke kahe lingi vahele tühik, määrates atribuudi line-height väärtuseks ' 80 pikslit ”:
a {kuva : blokk ;
reakõrgus : 80 pikslit ;
}
Nagu näete, luuakse ruum atribuudi line-height abil:
See on kõik! Oleme selgitanud HTML-i ja CSS-i kahe lingi vahele ruumi andmise meetodit.
Järeldus
' ”, „ margin-parem ”, ja „ reakõrgus ” CSS-i atribuute kasutatakse kahe lingi vahele horisontaalse ja vertikaalse ruumi andmiseks. Selle abil saate linkide paremalt ja vasakult küljelt ruumi reguleerida. Selles artiklis oleme selgitanud kahe lingi vahele ruumi eraldamise protseduuri kahe erineva meetodi abil ja toonud seotud näiteid.