Tässä oppaassa kerrotaan, miten kahden linkin väliin luodaan tilaa.
Aloitetaan!
Kuinka antaa tilaa kahden linkin väliin HTML:ssä ja CSS:ssä?
Jotta kahden linkin väliin jää tilaa, lisää ensin tarvittavat linkit HTML-tiedostoon.
Vaihe 1: Lisää linkkejä HTML:ään
HTML:ssä luodaan säilö käyttämällä
HTML
< div >< a href = 'https://linuxhint.com/create-html-file/' > Kuinka luoda HTML-tiedosto? < / a >
< a href = 'https://linuxhint.com/edit-html-file/' > Kuinka muokata HTML-tiedostoa? < / a >
< / div >
Seuraava kuva osoittaa, että linkit on lisätty onnistuneesti:
Vaihe 2: Tyyli Div & Link
Tässä vaiheessa muotoile div ja linkki käyttämällä ' div ”CSS:ssä. Säädämme pehmusteen ' 40 pikseliä ' ja aseta linkkien kirjasinkooksi ' suurempi ', div:n korkeudeksi on asetettu ' 150 pikseliä ' ja käytä taustaominaisuutta ja aseta div:n väriksi ' musta ”. Säädä sen jälkeen reunuksen leveys ' 5px ', tyylinä ' katkonainen 'ja väri '' rgb(251; 255; 0) ”.
CSS
div {pehmuste : 40 pikseliä ;
Fonttikoko : suurempi ;
korkeus : 150 pikseliä ;
tausta : musta ;
rajaa : 5px katkonainen rgb ( 251 , 255 , 0 ) ;
}
Yllä olevaa koodia käyttämällä saadaan seuraava tulos. Kuten näet, sekä div että linkit ovat tyylitelty:
Vaihe 3: Jätä tilaa kahden linkin väliin vaakatasossa
Voimme jättää tilaa kahden linkin väliin vaakasuunnassa käyttämällä HTML:ää ja CSS:ää. Tässä selitämme molemmat menetelmät yksitellen.
Tapa 1: HTML:n käyttö
Antaaksesi tilaa linkkien väliin kirjoittamatta ulkoista CSS:ää, voit käyttää ' ” HTML-koodissa, johon haluat luoda tilaa. ' ” tarkoittaa rikkoutumatonta tilaa. HTML-tiedostossa yhden :n lisääminen tarkoittaa yhtä välilyöntiä. Jos haluat antaa enemmän tilaa, ei ole suositeltavaa lisätä manuaalisesti tarvittavan määrän mukaan.
Siirrytään esimerkkiin ymmärtääksemme esitetyn käsitteen!
Esimerkki
Täällä kirjoitamme neljä kertaa ' ” luodaksesi välilyönnin ensimmäisen linkin jälkeen siten, että toinen linkki tulee näkyviin neljän välilyönnin jälkeen.
HTML
< div >< a href = 'https://linuxhint.com/create-html-file/' > Kuinka luoda HTML-tiedosto? < / a >
HTML-tiedoston muokkaaminen?
Kuten näet, ensimmäisen linkin oikealle puolelle luodaan tilaa:
Tapa 2: CSS:n käyttö
CSS:ssä käytämme ' marginaali-oikea ”-ominaisuus antaa tilaa kahden linkin väliin. ' marginaali-oikea ” -ominaisuutta käytetään lisäämään tilaa elementin oikealta puolelta. Voit myös asettaa sille negatiiviset arvot.
Syntaksi
Marginaali-oikeus -ominaisuuden syntaksi on annettu alla:
marginaali-oikea : arvo'' arvo ”, aseta marginaali elementin oikealta puolelta. Jatketaan esimerkkiä.
Esimerkki
Tässä käytämme ' a ' päästäksesi linkkiin, jonka olemme luoneet HTML:ään. Aseta seuraavaksi marginaalin oikeuden arvoksi ' 50 pikseliä ':
a {marginaali-oikea : 50 pikseliä ;
}
Tila luodaan ensimmäisen linkin oikealta puolelta, joka näkyy alla:
Vaihe 4: Jätä tilaa kahden linkin väliin pystysuunnassa
Jotta kahden linkin väliin jää pystysuora tila, kohdista linkit ensin pystysuoraan muotoon. Tämä tehdään käyttämällä ' lohko ' arvo ' näyttö '-ominaisuutta ja sitten ' viivankorkeus ”-ominaisuus antaa tilaa kahden linkkirivin väliin.
Esimerkki:
Tässä asetamme näyttöominaisuuden arvoksi ' lohko kohdistaaksesi linkit pystysuunnassa. Jätä sitten väli kahden linkin väliin asettamalla rivinkorkeusominaisuuden arvoksi ' 80 pikseliä ':
a {näyttö : lohko ;
viivankorkeus : 80 pikseliä ;
}
Kuten näet, tila luodaan line-height-ominaisuuden avulla:
Se siitä! Olemme selittäneet tavan antaa tilaa kahden linkin väliin HTML- ja CSS-palvelussa.
Johtopäätös
' ”, “ marginaali-oikea ”, ja ” viivankorkeus ” CSS:n ominaisuuksia käytetään antamaan vaaka- ja pystysuoraa tilaa kahden linkin väliin. Tämän avulla voit säätää tilaa linkkien oikealta ja vasemmalta puolelta. Tässä artikkelissa olemme selittäneet menettelyn, jolla kahden linkin väliin jätetään tilaa kahdella eri menetelmällä, ja toimittaneet asiaan liittyviä esimerkkejä.