Lumikha ng mga puwang at pisikal na paghihiwalay ng mga elemento sa HTML na may CSS
Ang paglikha ng mga puwang at pisikal na paghihiwalay ng mga elemento sa HTML ay maaaring mahirap maunawaan para sa simula ng web designer. Ito ay dahil ang HTML ay mayroong ari-arian na kilala bilang "pagbagsak ng whitespace." kung nagta-type ka ng 1 puwang o 100 sa iyong HTML code, ang web browser ay awtomatikong bumagsak sa mga puwang na iyon hanggang sa isang solong espasyo. Ito ay naiiba sa isang programa tulad ng Microsoft Word , na nagpapahintulot sa mga tagalikha ng dokumento na magdagdag ng maraming puwang upang paghiwalayin ang mga salita at iba pang mga elemento ng dokumentong iyon.
Hindi ito kung paano gumagana ang disenyo ng spacing ng website.
Kaya, paano mo idagdag ang mga whitespaces sa HTML na lumabas sa web page ? Sinusuri ng artikulong ito ang ilan sa iba't ibang paraan.
Mga puwang sa HTML na may CSS
Ang ginustong paraan upang magdagdag ng mga puwang sa iyong HTML ay ang Cascading Style Sheets (CSS) . Dapat gamitin ang CSS upang magdagdag ng anumang mga visual na aspeto ng isang webpage, at dahil ang espasyo ay bahagi ng mga visual na katangian ng isang pahina, CSS ay kung saan mo nais itong gawin.
Sa CSS, maaari mong gamitin ang alinman sa mga katangian ng margin o padding upang magdagdag ng espasyo sa paligid ng mga elemento. Bukod pa rito, ang teksto ng indent property ay nagdaragdag ng espasyo sa harap ng teksto, tulad ng para sa mga indent na talata.
Narito ang isang halimbawa kung paano gamitin ang CSS upang magdagdag ng puwang sa harap ng lahat ng iyong mga talata. Idagdag ang sumusunod na CSS sa iyong panlabas o panloob na estilo ng sheet:
p {
text-indent: 3em;
}
Mga puwang sa HTML: Sa loob ng Iyong Teksto
Kung nais mo lamang magdagdag ng karagdagang espasyo o dalawa sa iyong teksto, maaari mong gamitin ang hindi pagkakasira space.
Ang character na ito ay gumaganap tulad ng isang karaniwang character na espasyo, tanging ito ay hindi nabagsak sa loob ng browser.
Narito ang isang halimbawa kung paano magdagdag ng limang mga puwang sa loob ng isang linya ng teksto:
Ang teksto na ito ay may limang sobrang puwang sa loob nito
Ginagamit ang HTML:
Ang tekstong ito ay may & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; limang sobrang espasyo sa loob nito
Maaari mo ring gamitin ang tag na tag upang magdagdag ng dagdag na linya ng break.
Ang pangungusap na ito ay may limang line break sa dulo nito
Bakit ang Spacing sa HTML ay isang Masamang Ideya
Habang gumagana ang mga pagpipiliang ito parehong gumagana - ang mga elemento ng walang breaking na puwang ay talagang magdagdag ng espasyo sa iyong teksto at ang mga linya ng break ay magdagdag ng spacing sa ilalim ng talata na ipinapakita sa itaas - hindi ito ang pinakamahusay na paraan upang lumikha ng spacing sa iyong webpage. Ang pagdaragdag ng mga elementong ito sa iyong HTML ay nagdaragdag ng visual na impormasyon sa code sa halip na paghiwalayin ang istraktura ng isang pahina (HTML) mula sa mga visual na estilo (CSS). Ang mga pinakamahuhusay na kasanayan ay nangangasiwa na ang mga ito ay dapat na hiwalay sa maraming mga kadahilanan, kabilang ang kadalian ng pag-update sa hinaharap at pangkalahatang laki ng file at pagganap ng pahina.
Kung gumamit ka ng isang panlabas na estilo ng sheet upang utusan ang lahat ng iyong mga estilo at spacing, pagkatapos ay ang pagpapalit ng mga estilo para sa buong site ay madaling gawin, dahil kailangan mong i-update ang isang style sheet.
Isaalang-alang ang halimbawa sa itaas ng pangungusap na may limang tag sa dulo nito. Kung nais mo ang halagang espasyo sa ilalim ng bawat talata, kakailanganin mong idagdag ang HTML code sa bawat talata sa iyong buong site. Iyon ay isang makatarungang halaga ng dagdag na markup na kung saan ay mamaga ang iyong mga pahina.
Bukod pa rito, kung magpasiya ka sa kalsada na sobra o masyadong maliit ang puwang na ito, at nais mong baguhin ito nang kaunti, kakailanganin mong i-edit ang bawat solong talata sa iyong buong website. Hindi, salamat!
Sa halip na idagdag ang mga elemento ng espasyo sa iyong code, gamitin ang CSS.
p {
padding-bottom: 20px;
}
Ang isang linya ng CSS ay magdaragdag ng espasyo sa ilalim ng mga talata ng iyong pahina. Kung nais mong baguhin ang spacing na iyon sa hinaharap, i-edit ang isang linyang ito (sa halip na code ng iyong buong site) at magaling ka na!
Ngayon, kung kailangan mong magdagdag ng isang puwang sa isang bahagi ng iyong website, ang paggamit ng isang tag na
o isang solong puwang na hindi pagbagsak ay hindi katapusan ng mundo, ngunit kailangan mong maging maingat.
Ang paggamit ng mga inline na pagpipilian ng espasyo sa HTML ay maaaring maging isang madulas na slope. Habang ang isa o dalawa ay hindi maaaring makapinsala sa iyong site, kung magpapatuloy ka sa landas na iyon, ipakilala mo ang mga problema sa iyong mga pahina. Sa wakas, ikaw ay mas mahusay na bumabalik sa CSS para sa spacing ng HTML, at lahat ng iba pang mga pangangailangan sa visual na webpage.