Ituturo sa iyo ng manwal na ito ang pamamaraan upang lumikha ng espasyo sa pagitan ng dalawang link.
Magsimula na tayo!
Paano Magbigay ng Space sa pagitan ng Dalawang Link sa HTML at CSS?
Upang magbigay ng espasyo sa pagitan ng dalawang link, una sa lahat, idagdag ang mga kinakailangang link sa HTML file.
Hakbang 1: Magdagdag ng Mga Link sa HTML
Sa HTML, gagawa kami ng container gamit ang
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Paano Gumawa ng HTML file? < / a >
< a href = “https://linuxhint.com/edit-html-file/” > Paano Mag-edit ng HTML File? < / a >
< / div >
Ang sumusunod na larawan ay nagpapakita na ang mga link ay matagumpay na naidagdag:
Hakbang 2: I-istilo ang Div at Link
Sa hakbang na ito, i-istilo ang div at link gamit ang “ div ” sa CSS. Isasaayos namin ang padding sa ' 40px ” at itakda ang laki ng font ng mga link bilang “ mas malaki ”, ang taas ng div ay nakatakda bilang “ 150px ” at gamitin ang background property at itakda ang kulay ng div bilang “ itim ”. Pagkatapos nito, ayusin ang lapad ng hangganan bilang ' 5px ”, istilo bilang “ putol putol 'at kulayan bilang' rgb(251, 255, 0) ”.
CSS
div {padding : 40px ;
laki ng font : mas malaki ;
taas : 150px ;
background : itim ;
hangganan : 5px putol-putol rgb ( 251 , 255 , 0 ) ;
}
Gamit ang code sa itaas, ang sumusunod na output ay nakuha. Gaya ng nakikita mo, parehong naka-istilo ang div at ang mga link:
Hakbang 3: Bigyan ng Space sa Pagitan ng Dalawang Link nang Pahalang
Maaari kaming magbigay ng espasyo sa pagitan ng dalawang link nang pahalang sa pamamagitan ng paggamit ng HTML at CSS. Dito, ipapaliwanag namin ang parehong mga pamamaraan nang paisa-isa.
Paraan 1: Paggamit ng HTML
Upang magbigay ng espasyo sa pagitan ng mga link nang hindi nagsusulat ng anumang panlabas na CSS, maaari mong gamitin ang ' ” sa HTML kung saan mo gustong gumawa ng espasyo. “ ” ang ibig sabihin ay non-breaking space. Sa HTML file, ang pagdaragdag ng isa ay nangangahulugan ng isang espasyo. Kung gusto mong magbigay ng mas maraming espasyo, hindi mas mainam na manu-manong magdagdag ng ayon sa kinakailangang bilang ng mga puwang.
Lumipat tayo sa halimbawa upang maunawaan ang nakasaad na konsepto!
Halimbawa
Dito, apat na beses tayong magsusulat ' ” upang lumikha ng espasyo pagkatapos ng unang link sa paraang lalabas ang pangalawang link pagkatapos ng apat na puwang.
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > Paano Gumawa ng HTML file? < / a >
Paano mag-edit ng HTML File?
Tulad ng nakikita mo, ang espasyo ay nilikha sa kanang bahagi ng unang link:
Paraan 2: Paggamit ng CSS
Sa CSS, gagamitin namin ang ' margin-right ” property upang magbigay ng espasyo sa pagitan ng dalawang link. Ang ' margin-right ” Ang ari-arian ay ginagamit upang magdagdag ng espasyo mula sa kanang bahagi ng elemento. Maaari mo ring itakda ang mga negatibong halaga para dito.
Syntax
Ang syntax ng margin-right property ay ibinigay sa ibaba:
margin-right : halagaSa lugar ng ' halaga ”, itakda ang margin mula sa kanang bahagi ng elemento. Ipagpatuloy natin ang halimbawa.
Halimbawa
Dito, gagamitin natin ang ' a ” para ma-access ang link na ginawa namin sa HTML. Susunod, itakda ang halaga ng margin-right property bilang “ 50px ”:
a {margin-right : 50px ;
}
Ang espasyo ay nilikha mula sa kanang bahagi ng unang link, na makikita sa ibaba:
Hakbang 4: Bigyan ng Puwang sa Pagitan ng Dalawang Link nang Patayo
Upang magbigay ng patayong espasyo sa pagitan ng dalawang link, ihanay muna ang mga link sa patayong anyo. Ito ay gagawin sa pamamagitan ng paggamit ng ' harangan 'halaga ng' display ” property at pagkatapos ay gamit ang “ taas ng linya ” property upang magbigay ng espasyo sa pagitan ng dalawang linya ng link.
Halimbawa:
Dito, itatakda namin ang halaga ng display property bilang ' harangan ” upang ihanay ang mga link nang patayo. Pagkatapos, bigyan ang espasyo sa pagitan ng dalawang link sa pamamagitan ng pagtatakda ng value ng line-height property bilang “ 80px ”:
a {display : harangan ;
taas ng linya : 80px ;
}
Gaya ng nakikita mo, ang espasyo ay ginawa gamit ang line-height property:
Ayan yun! Ipinaliwanag namin ang paraan ng pagbibigay ng espasyo sa pagitan ng dalawang link sa HTML at CSS.
Konklusyon
Ang ' ”, “ margin-right ”, at “ taas ng linya ” Ang mga katangian ng CSS ay ginagamit upang magbigay ng pahalang at patayong espasyo sa pagitan ng dalawang link. Gamit ito, maaari mong ayusin ang espasyo mula sa kanan at kaliwang bahagi ng mga link. Sa artikulong ito, ipinaliwanag namin ang pamamaraan upang magbigay ng espasyo sa pagitan ng dalawang link gamit ang dalawang magkaibang pamamaraan at nagbigay ng mga kaugnay na halimbawa.