Sut i ddefnyddio HTML a CSS i greu Tabiau a Spacio

Edrychwch ar sut mae gofod gwyn yn HTML yn cael ei drin gan borwyr

Os ydych chi'n ddylunydd gwe cyntaf, un o'r nifer o bethau y bydd yn rhaid i chi eu deall yn gynnar yw'r ffordd y mae porwyr gwe yn trin gofod gwyn mewn cod safle.

Yn anffodus, nid yw'r ffordd y mae porwyr yn ymdrin â gofod gwyn yn rhy reddfol ar y dechrau, yn enwedig os dewch i mewn i HTML a'i gymharu â sut y caiff lle gwyn ei drin mewn rhaglenni prosesu geiriau, y gallech fod yn fwy cyfarwydd â nhw.

Mewn meddalwedd prosesu geiriau, gallwch ychwanegu llawer o lefydd neu leau yn y ddogfen a bydd y gofod hwnnw'n cael ei adlewyrchu yn arddangos cynnwys y ddogfen. Nid yw hyn yn wir gyda HTML neu gyda thudalennau gwe. O'r herwydd, mae dysgu sut mae gofod gwyn, yn wir, yn cael ei drin gan borwyr gwe yn bwysig iawn.

Spacing in Print

Mewn meddalwedd prosesu geiriau, y tri chymeriad gofod gwyn sylfaenol yw'r gofod, y tab, a'r dychweliad cerbyd. Mae pob un o'r rhain yn gweithredu mewn ffordd wahanol, ond yn HTML, mae porwyr yn eu cyflwyno i gyd yn yr un modd yn yr un modd. P'un a ydych chi'n gosod un gofod neu 100 o leoedd yn eich marc HTML, neu gymysgu'ch gofod â thapiau a ffurflenni cerbyd, bydd pob un o'r rhain yn cael ei gywasgu i un lle pan fydd y porwr wedi'i rendro. Yn nherminoleg dylunio gwe, gelwir hyn yn cwymp gofod gwyn. Ni allwch ddefnyddio'r allweddi rhyngweithiol nodweddiadol hyn i ychwanegu gofod gwag ar dudalen we oherwydd bod y porwr yn cwympo mannau lluosog i mewn i un lle yn unig wrth ei rendro yn y porwr,

Pam Mae Tabs Defnydd Rhywun?

Fel arfer, pan fydd pobl yn defnyddio tabiau mewn dogfen destun, maen nhw'n eu defnyddio am resymau gosodiad neu i gael y testun i symud i le penodol neu i fod yn bellter penodol o elfen arall. Mewn dyluniad gwe, ni allwch ddefnyddio'r cymeriadau gofod a nodwyd uchod i gyflawni'r arddulliau gweledol neu'r anghenion gosod hynny.

Mewn dylunio gwe, byddai'r defnydd o gymeriadau mannau ychwanegol yn y cod yn unig er mwyn darllen y cod hwnnw'n rhwydd. Mae dylunwyr a datblygwyr gwe yn aml yn defnyddio tabiau i god indent fel y gallant weld pa elfennau yw plant elfennau eraill - ond nid yw'r rhain yn effeithio ar gynllun gweledol y dudalen ei hun. Ar gyfer y newidiadau sydd eu hangen ar y cynllun gweledol, bydd angen i chi droi at CSS (taflenni arddull rhaeadru).

Defnyddio CSS i Creu Tabiau HTML a Spacio

Mae gwefannau heddiw wedi'u hadeiladu gyda gwahaniad o strwythur ac arddull. Mae'r HTML yn delio â strwythur tudalen tra bod yr arddull wedi'i phennu gan yr CSS. Golyga hyn, er mwyn creu gofod neu gyflawni cynllun penodol, dylech fod yn troi at CSS a pheidio â cheisio ychwanegu cymeriadau gwael i'r cod HTML.

Os ydych chi'n ceisio defnyddio tabiau i greu colofnau o destun, fe allwch chi ddefnyddio elfennau

sydd wedi'u lleoli â CSS i gael y golofn honno. Gellid gwneud y lleoliad hwn trwy flotiau CSS, lleoliad absoliwt a chymharol, neu dechnegau cynllun CSS newydd fel Flexbox neu Grid CSS.

Os yw'r data rydych chi'n ei osod allan yn ddata tabl, gallwch ddefnyddio tablau i alinio'r data hwnnw fel yr hoffech. Mae tablau yn aml yn cael rap gwael mewn dyluniad gwe oherwydd eu bod yn cael eu cam-drin fel offer gosod pur am gymaint o flynyddoedd, ond mae tablau'n dal yn berffaith ddilys os yw'ch cynnwys yn cynnwys y data tabl uchod.

Margins, Padio, a Chynnwys Testun

Y ffyrdd mwyaf cyffredin o greu gofod â CSS yw defnyddio un o'r arddulliau CSS canlynol:

  • ymyl
  • padio
  • testun-indent

Er enghraifft, gallwch chi osod y llinell gyntaf o baragraff fel tab gyda'r CSS canlynol (nodwch fod hyn yn tybio bod gan eich paragraff briodoldeb dosbarth o "gyntaf" ynghlwm wrtho):

p.first {
text-indent: 5em;
}

Bellach byddai'r paragraff hwn yn cael ei bentio tua 5 nod.

Gallwch hefyd ddefnyddio'r eiddo ymylon neu storio yn CSS i ychwanegu gofod i'r elfen uchaf, gwaelod, chwith, neu dde (neu gyfuniadau o'r ochrau hynny) o elfen. Yn y pen draw, gallwch chi gyflawni unrhyw fath o ofod sydd ei angen trwy droi at CSS.

Symud Testun Mwy nag Un Gofod Heb CSS

Os mai popeth sydd ei angen arnoch chi yw bod eich testun yn cael ei symud mwy nag un gofod i ffwrdd o'r eitem flaenorol, gallwch ddefnyddio'r lle nad yw'n torri.

I ddefnyddio'r lle nad yw'n torri, dim ond ychwanegu & nbsp; gymaint o weithiau ag y bydd ei angen arnoch yn eich marc HTML.

Er enghraifft, pe baech chi eisiau symud eich gair bum lle i chi, gallech ychwanegu'r canlynol cyn y gair.

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

Mae HTML yn parchu'r rhain ac ni fyddant yn eu cwympo i un lle. Fodd bynnag, ystyrir bod hyn yn arfer gwael iawn gan ei fod yn ychwanegu marc HTML ychwanegol i ddogfen yn unig er mwyn cyflawni anghenion y cynllun. Gan gyfeirio yn ôl at y gwahaniad hwnnw o strwythur ac arddull, dylech osgoi ychwanegu mannau di-dor yn syml i gyflawni effaith cynllun dymunol a dylent ddefnyddio ymylon CSS a llestri yn lle hynny.