Paghimo og mga luna ug pisikal nga pagbulag sa mga elemento sa HTML nga adunay CSS
Ang paghimo og mga luna ug pisikal nga panagbulag sa mga elemento sa HTML mahimong lisud sabton alang sa sinugdanan nga web designer. Kini tungod kay ang HTML adunay usa ka kabtangan nga gitawag nga "whitespace collapse." kung nag-type ka og usa ka luna o 100 sa imong HTML code, ang web browser sa awtomatik nga pag-collapse niadtong mga luna ngadto sa usa lamang ka luna. Lahi kini sa usa ka programa sama sa Microsoft Word , nga nagtugot sa mga tiglikod sa dokumento sa pagdugang sa daghang mga luna aron sa pagbulag sa mga pulong ug uban pang mga elemento sa maong dokumento.
Dili kini kung giunsa paglihok ang mga plano sa pag-disenyo sa website.
Busa, giunsa nimo pagdugang ang mga whitespaces sa HTML nga nagpakita sa web page ? Gisusi niining artikuloha ang pipila sa lainlaing mga paagi.
Mga luna sa HTML nga adunay CSS
Ang gipalabi nga paagi sa pagdugang sa mga luna sa imong HTML mao ang Cascading Style Sheets (CSS) . Ang CSS kinahanglan nga gamiton aron makadugang sa bisan unsang visual nga aspeto sa usa ka webpage, ug tungod kay ang gilay-on kabahin sa visual nga kinaiya sa usa ka panid, ang CSS mao ang gusto nimo nga buhaton kini.
Sa CSS, mahimo nimo gamiton ang mga bahin sa panapton o padding aron makadugang sa luna sa mga elemento. Dugang pa, ang teksto nga indent property nagdugang og luna sa atubangan sa teksto, sama sa pagpasulod sa mga parapo.
Ania ang usa ka ehemplo kon unsaon paggamit ang CSS aron makadugang sa luna atubangan sa tanan nimo nga mga parapo. Idugang ang mosunod nga CSS sa imong panid o estilo sa panid:
p {
text-indent: 3em;
}
Mga luna sa HTML: Sulud sa Imong Teksto
Kon gusto ka lamang nga makadugang sa usa ka dugang nga puwang o duha sa imong teksto, mahimo nimo gamiton ang non-breaking space.
Kini nga kinaiya naglihok sama sa usa ka standard space nga kinaiya, kini wala kini mahugno sulod sa browser.
Ania ang usa ka ehemplo kon unsaon pagdugang sa lima ka mga luna sulod sa usa ka linya sa teksto:
Kini nga teksto adunay lima ka dugang nga mga sulod sa sulod niini
Naggamit sa HTML:
Kini nga teksto adunay & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; lima ka dugang mga luna sulod niini
Mahimo usab nimo gamiton ang tag sa tag sa pagdugang og mga extra break line.
Kini nga tudluan adunay lima ka linya sa pagguba sa katapusan niini
Nganong ang Spacing sa HTML usa ka Bad Ideya
Samtang kini nga mga kapilian nagtrabaho - ang dili pagsupak nga elemento sa tinuud makadugang sa spacing sa imong teksto ug ang mga linya sa break magadugang sa gibutang sa ubos sa parapo nga gipakita sa ibabaw - kini dili ang pinakamaayong paagi sa paghimo sa gilay-on sa imong webpage. Ang pagdugang niini nga mga elemento sa imong HTML nagdugang sa biswal nga kasayuran ngadto sa code kay sa pagbulag sa istruktura sa usa ka panid (HTML) gikan sa visual nga estilo (CSS). Ang mga labing maayo nga mga pamaagi nagdikta nga kini kinahanglan nga bulag alang sa daghang mga hinungdan, lakip ang kasayon sa pag-update sa umaabot ug sa kinatibuk-ang gidak-on sa file ug pagpakita sa pahina.
Kung mogamit ka sa usa ka estilo sa gawas nga estudyo aron pagdiktar sa tanan nimo nga mga estilo ug mga lahi, dayon ang pag-usab sa mga estilo alang sa tibuok nga site sayon buhaton, tungod kay kinahanglan nimo nga usbon ang usa ka style sheet.
Tagda ang pananglitan sa hugpong sa mga pulong nga adunay tag lima ka tag sa katapusan niini. Kung gusto nimo ang gidaghanon sa spacing sa ubos sa matag parapo, kinahanglan nimo idugang ang HTML code sa matag parapo sa imong tibuok nga site. Kana usa ka maanindot nga gidaghanon sa dugang nga markup nga magamit sa imong mga pahina.
Dugang pa, kon ikaw modesisyon sa dalan nga kini nga hut-ong sobra ra kaayo o gamay kaayo, ug gusto nimo nga usbon kini og gamay, gikinahanglan nimo nga usbon ang matag usa nga parapo sa imong tibuok nga website. Dili pasalamatan!
Imbis idugang kining mga elemento sa spacing sa imong code, gamit ang CSS.
p {
padding-bottom: 20px;
}
Kana nga usa ka linya sa CSS ang magdugang sa spacing ubos sa mga parapo sa imong pahina. Kon gusto nimong usbon ang maong luna sa umaabot, i-edit kini nga usa ka linya (imbes nga code sa imong site) ug maayo ka nga moadto!
Karon, kung kinahanglan ka magdugang og usa ka luna sa usa ka bahin sa imong website, ang paggamit sa usa ka tag usa ka
tag o usa ka sagad nga lugar dili ang katapusan sa kalibutan, apan kinahanglan ka nga mag-amping.
Ang paggamit niining inline nga mga kapilian sa HTML spacing mahimong usa ka madanglog nga bakilid. Samtang usa o duha ang dili makapasakit sa imong site, kon magpadayon ka sa dalan, imong ipaila ang mga problema sa imong mga panid. Sa katapusan, mas maayo ka nga maglikay sa CSS alang sa spacing sa HTML, ug sa uban pang mga panginahanglan sa webpage nga visual.