Kif tuża HTML u CSS biex Oħloq Tabs u Spazjar

Ħares lejn kif l-ispazju abjad fl-HTML huwa ttrattat mill-browsers

Jekk inti web designer tal-bidu, waħda mill-ħafna affarijiet li jkollok tifhem kmieni hija l-mod li l-ispazju abjad fil-kodiċi tas-sit huwa ttrattat mill-web browsers.

Sfortunatament, il-mod li l-browsers immaniġġjati mill-ispazju abjad ma tantx hu intuwittiv għall-ewwel, speċjalment jekk tidħol f'HTML u tqabbelha ma 'kif l-ispazju abjad jiġi ttrattat fi programmi ta' pproċessar tal-kitba, li tista 'tkun aktar familjari magħhom.

Fis-softwer tal-ipproċessar tal-kliem, tista 'żżid ħafna spazji jew tabs fid-dokument u dak l-ispazju se jkun rifless fil-wirja tal-kontenut tad-dokument. Dan mhuwiex il-każ tal-HTML jew mal-paġni tal-web. Bħala tali, it-tagħlim dwar kif l-ispazju abjad hu, fil-fatt, immaniġġjat minn web browsers huwa importanti ħafna.

Spazjar fl-istampar

Fis-softwer tal-ipproċessar tal-kliem, it-tliet karattri primarji tal-ispazju abjad huma l-ispazju, it-tab u r-ritorn tal-ġarr. Kull wieħed minn dawn jaġixxi b'mod distint, iżda fl-HTML, il-browsers jagħmluhom kollha essenzjalment l-istess. Kemm jekk inti tpoġġi spazju wieħed jew 100 spazju fil-markup HTML tiegħek, jew tħallat it-twaħħil tiegħek ma 'tabs u prospetti tal-ġarr, dawn kollha se jiġu kkondensati sa spazju wieħed meta l-paġna tingħata mill-browser. Fit-terminoloġija tad-disinn tal-web, dan huwa magħruf bħala kollass ta 'spazju vojt. Ma tistax tuża dawn l-ispazji ta 'l-ispazji tipiċi biex iżżid l-ispazji fuq il-baħar f'paġna web minħabba li l-browser jeħlaq spazji multipli' l isfel fi spazju wieħed biss meta jingħata fil-browser,

Għaliex Does Someone Uża Tabs?

Tipikament, meta n-nies jużaw tabs f'dokument ta 'test, huma jużawhom għal raġunijiet ta' tqassim jew biex it-test ikun jista 'jiċċaqlaq għal ċertu post jew biex ikun hemm ċerta distanza minn element ieħor. Fid-disinn tal-web, ma tistax tuża dawk il-karattri spazjali msemmija hawn fuq biex tikseb dawk l-istili viżwali jew il-ħtiġijiet ta 'tqassim.

Fid-disinn tal-web, l-użu ta 'karattri ta' spazju żejjed fil-kodiċi jkun purament għall-faċilità li taqra dak il-kodiċi. Id-disinjaturi u l-iżviluppaturi tal-web ħafna drabi jużaw tabs biex jiddaħħlu l-kodiċi sabiex ikunu jistgħu jaraw liema elementi huma tfal ta 'elementi oħra - iżda dawk l-inċiżi ma jaffettwawx it-tqassim viżwali tal-paġna nnifisha. Għal dawk il-bidliet meħtieġa għat-tqassim viżwali, ser ikollok bżonn tmur għand CSS (folji ta 'stil li fihom jidħlu fil-kaskata).

Bl-użu ta 'CSS biex Oħloq Tabs u Spazjar HTML

Illum il-ġurnata l-websajts huma mibnija b'sistema ta 'struttura u separazzjoni. L-istruttura ta 'paġna hija ttrattata mill-HTML filwaqt li l-istil huwa ddettat mis-CSS. Dan ifisser li biex jinħoloq spazju jew jinkiseb ċertu tqassim, int għandek iddur għal CSS u mhux tipprova sempliċement iżżid karattri ta 'spazji mal-kodiċi HTML.

Jekk qed tipprova tuża tabs biex toħloq kolonni ta 'test, tista' minflok tuża elementi

li huma mqiegħda b'CSS biex tikseb dak it-tqassim tal-kolonna. Dan il-pożizzjonament jista 'jsir permezz ta' sufruni CSS, pożizzjonar assolut u relattiv, jew tekniki ġodda ta 'tqassim CSS bħal Flexbox jew CSS Grid.

Jekk id-data li qed tfassal hija data tabulari, tista 'tuża tabelli biex tallinja dik id-dejta kif tixtieq. It-tabelli ta 'spiss jiksbu rap ħżiena fid-disinn tal-web minħabba li ġew abbużati bħala għodod ta' tqassim pur għal ħafna snin, iżda t-tabelli għadhom perfettament validi jekk il-kontenut tiegħek fih dik id-dejta tabulari msemmija qabel.

Il-marġini, l-ikkuttunar u l-indent tat-test

L-iktar modi komuni biex jinħoloq spazju ma 'CSS huwa billi jintuża wieħed mill-istili tas-CSS li ġejjin:

Per eżempju, tista 'sservi l-ewwel linja ta' paragrafu bħal tab bl-CSS li ġejjin (innota li dan jassumi li l-paragrafu tiegħek għandu attribut tal-klassi ta '"l-ewwel" mehmuż miegħu):

p.first {
test inċiż: 5em;
}

Dan il-paragrafu issa se jkun indentat madwar 5 karattri.

Tista 'wkoll tuża l-marġni jew il-proprjetajiet tal-padding f'CSS biex iżżid l-ispazjar fuq il-parti ta' fuq, qiegħ, xellug, jew fuq il-lemin (jew kombinazzjonijiet ta 'dawk il-ġnub) ta' element. Fl-aħħarnett, tista 'tikseb kwalunkwe tip ta' spazju meħtieġ billi ddawwar lejn CSS.

Trasferiment ta 'Test Aktar minn Spazju Waħdu Mingħajr CSS

Jekk kull ma trid hi biex it-test tiegħek jiġi mċaqlaq aktar minn spazju wieħed 'il bogħod mill-oġġett preċedenti, tista' tuża l-ispazju li ma jitkissrux.

Biex tuża l-ispazju li ma jitkissrux, inti sempliċiment iżżid & nbsp; kemm-il darba għandek bżonnha fil-markup HTML tiegħek.

Per eżempju, jekk riedu jimxu l-kelma tiegħek ħames spazji fuq, tista 'żżid dan li ġej qabel il-kelma.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

L-HTML jirrispetta dawn u mhux se jikkollassawhom għal spazju wieħed. Madankollu, din hija meqjusa bħala prattika fqira ħafna peress li qed iżżid il-markup HTML addizzjonali għal dokument biss biex jinkisbu l-ħtiġijiet ta 'tqassim. B'referenza għal dik is-separazzjoni tal-istruttura u l-istil, għandek tevita li żżid spazji li ma jitkissrux sempliċement biex jinkiseb effett ta 'tqassim mixtieq u minflok għandhom jużaw marġnijiet CSS u padding.