Tab Space Sa halip na Maramihang Non-Breaking Spaces (“ ”)?

Tab Space Sa Halip Na Maramihang Non Breaking Spaces Nbsp



Sa web development, ang mga puwang ay idinaragdag sa mga HTML na dokumento sa pamamagitan ng paggamit ng “   ” entity code na tinatawag ding non-breaking space. Sa ilang mga kaso, ang pagdaragdag ng maramihang mga hindi nakakasira na espasyo sa dokumento, tulad ng tab space, ay kinakailangan. Samakatuwid, maramihang ' ' maaaring makaapekto ang mga entity code sa pagkakasunud-sunod ng code at kalinisan ng dokumento.

Upang matugunan ang mga isyung ito, may ilang iba pang mga paraan upang isama ang maramihang mga hindi nasisira na puwang sa HTML na dokumento, gaya ng “ 

   ”, “      'mga elemento, CSS'   margin-kaliwa   ”, “   padding-kaliwa   ” properties, at marami pang iba.


  Ang pag-aaral na ito ay magtuturo sa iyo:
 
    
 

 



  Una, tatalakayin natin ang isang halimbawa na nagpapatupad ng '       ” upang magdagdag ng mga puwang sa HTML na dokumento. Pagkatapos, unti-unting dumaan sa mga ilustrasyon upang ipakita ang iba't ibang paraan upang magdagdag ng espasyo sa tab.
 
 


  Paano Magdagdag ng Mga Puwang Gamit ang “ ” entity code sa HTML?


  Upang magdagdag ng mga puwang gamit ang '       ” sa HTML page, sundin ang mga ibinigay na hakbang:
 
 


    

  •   Magdagdag ng isang elemento ng div at italaga ito ng isang klase '   artikulo   ”.
    • 

  •   Pagkatapos nito, maglagay ng '   
       ” elemento para sa heading.
    • 

  •   Pagkatapos, idagdag ang '   
       ” elemento upang magdagdag ng isang talata. Sa simula ng talata, ang mga puwang ay idinagdag sa pamamagitan ng pagpahiwatig ng entity code '       ”:
    • 


  <   div    klase  =  'artikulo'  > 
    <   h2   >  Kaalaman ay kapangyarihan  <  /   h2   > 
    <   p   >        Ang kaalaman ay kapangyarihan ay nangangahulugan na ang isang edukadong tao ay may ganap na kontrol sa kanyang buhay sa pamamagitan ng lakas ng kaalaman.  <  /   p   > 

  <  /   div   >

  Makikita na ang mga puwang ay matagumpay na naidagdag sa simula ng talata:
 
    
 


 


  Paano Magdagdag ng Tab Space Gamit ang HTML “” Element?


  Ang HTML '      ” ay isang inline na elemento na ginagamit upang markahan ang isang bahagi ng isang dokumento. Sa patuloy na halimbawa, idinagdag namin ang  na elemento na may '   tab   ” id. Ang elementong ito ay naka-istilo sa CSS upang makagawa ng espasyo:
 
 
  <   div    klase  =  'artikulo'  > 
  <   h2   >Kaalaman ay kapangyarihan<  /   h2   > 
  <   p   > <   span    id  =  'tab'  ><  /   span   > Ang kaalaman ay kapangyarihan ay nagpapahiwatig na ang isang edukadong tao ay may ganap na kontrol sa kanyang buhay sa pamamagitan ng kaalaman  lakas ni.

Estilo 'artikulo' div

.artikulo {
margin: auto;
lapad : 400px;
padding: 10px;
}

Ang ' .artikulo ' ay ginagamit upang ma-access ang '

” na mga tag, na pagkatapos ay inilapat sa mga sumusunod na katangian:

  • “ lapad Tinutukoy ng property ang lapad ng elemento.
  • “ margin ” Tinutukoy ng property ang taas ng elemento.
  • “ padding ” bumubuo ng espasyo sa paligid ng nilalaman ng elemento.

Style 'tab' id

#tab {
padding-kaliwa: 8px;
}

Ang ' #tab 'I-access ang' tab ” id ng elemento at ilapat ang “ padding-kaliwa ” ari-arian dito.

Output

Paano Magdagdag ng Tab Space Gamit ang HTML “
” Element?

Ang ' 

   Tinutukoy ng elemento ng ” ang paunang na-format na teksto. Ang teksto sa loob ng elementong 
 ay ipinapakita sa web page kung ano ito.


  Pangkalahatang-ideya ng halimbawa sa pamamagitan ng unang paggawa ng HTML page:


    

  •   Idagdag ang '   
       ” elemento upang magtakda ng isang heading ng antas ng dalawang sa dokumento.
    • 

  •   Pagkatapos, idagdag ang '   
       ” na tag, at tukuyin ang nilalaman na may gustong pag-format:
    • 

  <   h2   >HTML pre Tag<  /   h2   > 
  <   pre   > 
  function productFunction  (  p1, p2  )   { 
  ibalik ang p1 * p2; 
    }  
  <  /   pre   >
   Output  

 


  Paano Magdagdag ng Tab Space Gamit ang CSS 'margin-left' Property?


  Upang magdagdag ng espasyo sa tab gamit ang CSS “   margin-kaliwa   ” ari-arian, sundin ang ibinigay na pamamaraan:


    

  •   Una, isama ang isang div elemento sa dokumento at italaga ito ng isang klase '   mga larawan   ”.
    • 

  •   Sa loob ng elementong div na ito, magdagdag ng isa pang dalawang elemento ng div kasama ng klase '   img-1   'at'   img-2   ” ayon sa pagkakabanggit.
    • 

  •   Ang bawat isa sa dalawang elemento ng div na ito ay naglalaman ng mga larawan na tinukoy gamit ang '       ” tag.
    • 

  •   Ang mga '       Ang mga tag ay nauugnay sa '   src   'at'   lapad   ” mga katangian. Tinutukoy ng attribute na 'src' ang URL ng larawan, at inaayos ng attribute na 'width' ang lapad ng larawan.
    • 



  Narito ang HTML code ng tinalakay na senaryo sa itaas:
  <   div    klase  =  'mga larawan'  > 
  <   div    klase  =  'img-1'  > 
  <   img    src  =  '/spring-images/marguerite-flower.jpg'   lapad  =  '250'  > 
  <  /   div   > 
  <   div    klase  =  'img-2'  > 
  <   img    src  =  '/spring-images/flower-ga8f105f1d_1920.jpg'   lapad  =  '250'  > 
  <  /   div   > 
  <  /   div   >
  Ang HTML na pahina ay magiging ganito: 

 


  Lumipat tayo sa seksyon ng CSS upang magdagdag ng maraming espasyo sa '   img-2   ” klase nang hindi gumagamit ng maramihang hindi nakakasira na mga puwang.


   Estilo 'mga larawan' div 
  .mga larawan  { 
    lapad  : 500px; 
  margin: auto; 

  }

  Ang '   .mga larawan   ' ay ginagamit upang ma-access ang HTML div na naglalaman ng '   mga larawan   ” klase. Ang paliwanag ng mga nabanggit na katangian ay ang mga sumusunod:


    

  •   “   lapad   Tinutukoy ng property ang lapad ng elemento.
    • 

  •   “   margin   ” Tinutukoy ng property ang espasyo sa paligid ng mga gilid ng elemento.
    • 



   Istilo 'img-2' div  
  I-access ang div element gamit ang “   .img-2   ”:
  .img-  2   { 
  margin-kaliwa: 30px; 

  }

  Ang '   margin-kaliwa   ' ari-arian na may '   30px   Ang 'value ay inilapat sa HTML div element na may klase '   img-2   ”. Magdaragdag ang property na ito ng 30px space sa kaliwa ng elemento.


  Dito, ipinapakita ng resulta na ang pangalawang larawan ay inilapat na may ilang espasyo sa simula:


 


  Nag-elaborate kami sa pagdaragdag ng mga puwang ng tab sa halip na gumamit ng maraming hindi puwang na puwang '       ”.


  Konklusyon


  Sa HTML, ang '       ” Ang entity code ay karaniwang ginagamit upang magdagdag ng hindi nakakasira na espasyo sa dokumento. Upang maiwasang gamitin ang entity code na ito nang maraming beses, may iba pang mga paraan upang magdagdag ng espasyo ng tab sa isang dokumento. Kasama sa mga pamamaraang ito ang paggamit ng HTML '   
   ”, “      ' mga elemento, '   margin-kaliwa   ” property, at marami pang iba. Ang blog na ito ay nagbanggit ng ilang paraan na nakakatulong upang magdagdag ng mga puwang ng tab sa HTML na dokumento sa halip na magdagdag ng maramihang “ ” mga code ng entity.

							
							

							
							

							

							

							  

								 Iba pa

Kategorya

Patok Na Mga Post

Paano Magtanggal ng mga Natutunang Salita sa isang Android

Ano ang AWS CloudHSM sa AWS Cryptography Services?

Mag-login bilang Root User sa Raspberry Pi sa Boot

Paano Awtomatikong I-backup ang MySQL Database Gamit ang Bash Script

Paano Magdagdag ng Higit pang mga USB Port sa isang Laptop?

Paano Suriin ang Bersyon ng Kernel sa Linux

Paano I-off ang Mga Profile sa Google Chrome

Gamitin ang Raspberry Pi bilang Crypto Coin Price Checker Gamit ang Coinmon

Paano Magdagdag ng Horizontal at Vertical Space sa Pagitan ng Mga Elemento sa Tailwind?

Paano Mag-install ng Docker Compose sa Debian 12 Bookworm

Paano Maghanap ng AWS Account Number

Paano Kumuha ng isang Discord Default na Avatar Mabilis?

Paano Gamitin ang Printf sa C

C++ Virtual Constructor

Ang AWS Access Key Id ay Hindi Umiiral sa Aming Mga Tala

Alamin Kung Paano Pinapahusay ng PowerShell CmdletBinding ang Mga Function

Paano Mag-set Up ng AirPrint Server sa Iyong Raspberry Pi

Paano Itakda ang Imahe ng Estilo ng Listahan sa Tailwind

Listahan ng Git ng Bago/Binago/Tinanggal na mga File

Paano I-round ang Doble sa dalawang Decimal Places sa Java