Šiame vadove sužinosite, kaip sukurti tarpą tarp dviejų nuorodų.
Pradėkime!
Kaip suteikti vietos tarp dviejų nuorodų HTML ir CSS?
Norėdami palikti tarpą tarp dviejų nuorodų, pirmiausia pridėkite reikiamas nuorodas į HTML failą.
1 veiksmas: pridėkite nuorodas į HTML
HTML sukursime konteinerį naudodami
HTML
< div >< a href = „https://linuxhint.com/create-html-file/“ > Kaip sukurti HTML failą? < / a >
< a href = „https://linuxhint.com/edit-html-file/“ > Kaip redaguoti HTML failą? < / a >
< / div >
Toliau pateiktame paveikslėlyje parodyta, kad nuorodos buvo sėkmingai pridėtos:
2 veiksmas: sukurkite Div & Link stilių
Šiame žingsnyje nustatykite div ir susiejimo stilių naudodami „ div “ CSS. Mes pakoreguosime užpildą į ' 40 piks “ ir nustatykite nuorodų šrifto dydį kaip „ didesnis “, skyrelio aukštis nustatytas kaip „ 150 piks “ ir naudokite fono ypatybę ir nustatykite div spalvą kaip „ juodas “. Po to sureguliuokite kraštinės plotį kaip „ 5 piks “, stilius kaip „ punktyriškai “ ir spalva kaip „ rgb(251, 255, 0) “.
CSS
div {kamšalas : 40 piks ;
šrifto dydis : didesnis ;
aukščio : 150 piks ;
fone : juodas ;
siena : 5 piks punktyriškai rgb ( 251 , 255 , 0 ) ;
}
Naudojant aukščiau pateiktą kodą, gaunama tokia produkcija. Kaip matote, ir div, ir nuorodos yra stilizuoti:
3 veiksmas: horizontaliai palikite tarpą tarp dviejų nuorodų
Naudodami HTML ir CSS galime palikti tarpą tarp dviejų nuorodų horizontaliai. Čia mes paaiškinsime abu metodus po vieną.
1 būdas: HTML naudojimas
Norėdami palikti tarpą tarp nuorodų nerašydami jokio išorinio CSS, galite naudoti ' “ HTML, kuriame norite sukurti vietos. “ “ reiškia nelūžtančią erdvę. HTML faile pridėjus vieną reiškia vieną tarpą. Jei norite suteikti daugiau vietos, nepageidautina rankiniu būdu pridėti pagal reikiamą tarpų skaičių.
Pereikime prie pavyzdžio, kad suprastume pateiktą sąvoką!
Pavyzdys
Čia rašysime keturis kartus “ “ sukurti tarpą po pirmosios nuorodos taip, kad antroji nuoroda atsirastų po keturių tarpų.
HTML
< div >< a href = „https://linuxhint.com/create-html-file/“ > Kaip sukurti HTML failą? < / a >
Kaip redaguoti HTML failą?
Kaip matote, pirmosios nuorodos dešinėje sukuriama vieta:
2 būdas: CSS naudojimas
CSS naudosime „ paraštė-dešinė “ savybę, kad tarp dviejų nuorodų būtų palikta erdvė. „ paraštė-dešinė ypatybė naudojama norint pridėti vietos iš dešinės elemento pusės. Taip pat galite nustatyti neigiamas jo vertes.
Sintaksė
Žemiau pateikta paraštės teisės ypatybės sintaksė:
paraštė-dešinė : vertėVietoje ' vertė “, nustatykite paraštę iš dešinės elemento pusės. Tęskime pavyzdį.
Pavyzdys
Čia mes naudosime „ a “ norėdami pasiekti nuorodą, kurią sukūrėme HTML. Tada nustatykite maržos teisės nuosavybės vertę kaip „ 50 piks “:
a {paraštė-dešinė : 50 piks ;
}
Erdvė sukuriama dešinėje pirmosios nuorodos pusėje, kurią galite pamatyti žemiau:
4 veiksmas: vertikaliai palikite tarpą tarp dviejų nuorodų
Norėdami suteikti vertikalią tarpą tarp dviejų nuorodų, pirmiausia sulygiuokite nuorodas vertikaliai. Tai bus padaryta naudojant ' blokas “ vertė “ ekranas “ ypatybę ir tada naudodami „ linijos aukštis “ savybę, kad tarp dviejų nuorodų eilučių būtų tarpas.
Pavyzdys:
Čia mes nustatysime rodymo ypatybės vertę kaip „ blokas “, kad saitai būtų sulygiuoti vertikaliai. Tada palikite tarpą tarp dviejų nuorodų, nustatydami eilutės aukščio ypatybės reikšmę kaip „ 80 piks “:
a {ekranas : blokas ;
linijos aukštis : 80 piks ;
}
Kaip matote, erdvė sukuriama naudojant linijos aukščio savybę:
Viskas! Mes paaiškinome tarpo tarp dviejų nuorodų HTML ir CSS metodą.
Išvada
„ “, „ paraštė-dešinė “ ir „ linijos aukštis “ CSS ypatybės naudojamos norint suteikti horizontalią ir vertikalią erdvę tarp dviejų nuorodų. Naudodami tai galite reguliuoti erdvę iš dešinės ir kairės nuorodų pusių. Šiame straipsnyje paaiškinome, kaip dviem skirtingais metodais palikti tarpą tarp dviejų nuorodų, ir pateikėme susijusių pavyzdžių.