Creu mannau a gwahanu ffisegol elfennau yn HTML gyda CSS
Gall fod yn anodd creu gofod a gwahanu ffisegol elfennau yn HTML ar gyfer y dylunydd gwe cyntaf. Mae hyn oherwydd bod gan HTML eiddo a elwir yn "cwymp gofod gwely." p'un a ydych chi'n teipio 1 gofod neu 100 yn eich cod HTML, mae'r porwr gwe yn awtomatig yn cwympo'r mannau hynny i lawr i un lle yn unig. Mae hyn yn wahanol i raglen fel Microsoft Word , sy'n galluogi crewyr dogfennau i ychwanegu lleoedd lluosog i eiriau ar wahân ac elfennau eraill o'r ddogfen honno.
Nid dyna sut mae gwefan dylunio gwefannau yn gweithio.
Felly, sut y byddwch chi'n ychwanegu mannau gwag yn HTML sy'n dangos ar y dudalen we ? Mae'r erthygl hon yn archwilio rhai o'r gwahanol ffyrdd.
Gofodau mewn HTML gyda CSS
Y ffordd orau i ychwanegu mannau yn eich HTML yw gyda Cascading Style Sheets (CSS) . Dylid defnyddio CSS i ychwanegu unrhyw agweddau gweledol ar dudalen we, ac er bod y llefydd yn rhan o nodweddion dyluniad gweledol tudalen, mae CSS yn eich galluogi chi i wneud hyn.
Yn CSS, gallwch ddefnyddio naill ai'r ffiniau neu'r nodweddion padio i ychwanegu gofod o gwmpas elfennau. Yn ogystal, mae'r eiddo gosodiad testun yn ychwanegu gofod i flaen y testun, megis ar gyfer indentio paragraffau.
Dyma enghraifft o sut i ddefnyddio CSS i ychwanegu lle o flaen eich holl baragraffau. Ychwanegu'r CSS canlynol i'ch dalen arddull allanol neu fewnol :
p {
text-indent: 3em;
}
Mannau yn HTML: Tu Mewn i'ch Testun
Os ydych chi eisiau ychwanegu lle ychwanegol neu ddau atoch i'ch testun, gallwch ddefnyddio'r lle nad yw'n torri.
Mae'r cymeriad hwn yn gweithredu fel cymeriad gofod safonol, dim ond nid yw'n cwympo tu mewn i'r porwr.
Dyma enghraifft o sut i ychwanegu pum lle y tu mewn i linell destun:
Mae gan y testun hwn bum lle ychwanegol y tu mewn iddo
Yn defnyddio'r HTML:
Mae gan y testun hwn & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; pum lle ychwanegol y tu mewn iddo
Gallwch hefyd ddefnyddio'r tag
i ychwanegu seibiannau llinell ychwanegol.
Mae gan y ddedfryd hon bum seibiant llinell ar ei diwedd
Pam Mae Spacing in HTML yn Syniad Gwael
Er bod yr opsiynau hyn yn gweithio - bydd yr elfen o lefydd di-dor yn wir yn ychwanegu gofod i'ch testun a bydd y toriadau llinell yn ychwanegu gofod o dan y paragraff a ddangosir uchod - dyma'r ffordd orau o greu gofod yn eich gwefan. Mae ychwanegu'r elfennau hyn i'ch HTML yn ychwanegu gwybodaeth weledol i'r cod yn hytrach na gwahanu strwythur tudalen (HTML) o'r arddulliau gweledol (CSS). Mae'r arferion gorau yn nodi y dylai'r rhain fod ar wahân am nifer o resymau, gan gynnwys rhwyddineb diweddaru yn y dyfodol a maint ffeiliau cyffredinol a pherfformiad y dudalen.
Os ydych chi'n defnyddio dalen arddull allanol i bennu eich holl arddulliau a'ch mannau gofod, yna mae newid yr arddulliau hynny ar gyfer y wefan gyfan yn hawdd i'w wneud, gan mai dim ond un daflen arddull sydd gennych.
Ystyriwch yr enghraifft uchod o'r frawddeg gyda phum tag ar y diwedd. Os oeddech am gael y swm hwnnw o ofod ar waelod pob paragraff, byddai angen i chi ychwanegu'r cod HTML hwnnw i bob paragraff yn eich holl wefan. Mae hynny'n swm teg o farc ychwanegol a fydd yn blodeuo'ch tudalennau.
Yn ogystal, os penderfynwch i lawr y ffordd fod y gofod hwn yn ormod neu'n rhy fach, a'ch bod am ei newid ychydig, byddai angen ichi olygu pob paragraff unigol yn eich gwefan gyfan. Dim Diolch!
Yn hytrach na ychwanegu'r elfennau gofod hyn i'ch cod, defnyddiwch CSS.
p {
gwaelod padio: 20px;
}
Byddai'r un llinell o CSS yn ychwanegu gofod o dan baragraffau eich tudalen. Os ydych chi eisiau newid y gofod hwnnw yn y dyfodol, golygu'r un llinell hon (yn hytrach na chod eich safle cyfan) ac rydych chi'n dda i fynd!
Nawr, os oes angen i chi ychwanegu un lle mewn un rhan o'ch gwefan, nid yw defnyddio tag
neu un lle nad yw'n torri yn ddiwedd y byd, ond mae angen i chi fod yn ofalus.
Gall defnyddio'r opsiynau gwahanu mewnline HTML hyn fod yn llethr llithrig. Er na all un neu ddau brifo eich gwefan, os byddwch yn parhau i lawr y llwybr hwnnw, byddwch yn cyflwyno problemau i'ch tudalennau. Yn y pen draw, rydych chi'n well i chi droi at CSS ar gyfer gofod HTML, a holl anghenion gweledol eraill y we.