Kaip sukurti papildomą erdvę HTML ar tinklalapyje

Sukurti papildomą erdvę savo HTML puslapyje galima pasiekti daugeliu būdų, priklausomai nuo to, kokio tipo erdvę norite sukurti. Kituose skyriuose yra daug skirtingų būdų, kaip sukurti papildomą erdvę naudojant HTML ir CSS.

Vienas iš sudėtingiausių dalykų naujiems vartotojams, kurie kuria savo tinklalapį, yra tai, kad jie negali kelis kartus paspaudžia tarpo klavišų papildomų tarpų. Norėdami sukurti papildomų tarpų prieš, po arba tarp teksto, naudokite išplėstas HTML simbolis (nesilaikantis vietos).

Pvz., Su „papildoma erdve“ mūsų HTML yra toks kodas.

 papildoma erdvė 

Pastaba: jei naudojate WYSIWYG redaktorių, kad įvestumėte pirmiau nurodytą kodą, turite būti HTML skirtuke arba redaguoti HTML kodą.

  • Pilnas išplėstinių specialių HTML simbolių sąrašas.

Laikykite tarpą tarp teksto, įklijuoto į puslapį

Jei įklijuojate tekstą su papildomomis erdvėmis ar skirtukais, galite naudoti HTML

 žyma, kad tekstas būtų suformatuotas. Žemiau pateikiamas pavyzdys, kaip įterpti tekstą su papildomomis erdvėmis naudojant 
 žyma.

 Šiame tekste yra daug erdvių 

Anksčiau pateiktas pavyzdys atliekamas naudojant žemiau esantį HTML kodą.

 Šiame tekste yra daug erdvių 

Pastaba: jei naudojate WYSIWYG redaktorių, kad įvestumėte aukščiau esantį kodą, turite būti HTML skirtuke arba redaguoti HTML kodą.

  • Žr. Mūsų HTML
     žymas puslapyje, kur rasite daugiau informacijos apie šią žymą.

Sukurti papildomą erdvę aplink elementą ar objektą

Bet kuris HTML elementas gali būti papildomas tarpas į viršų, dešinę, apačią arba į kairę. Tačiau svarbu, kad suprastumėte skirtumą tarp paraštės ir užpildymo prieš nuspręsdami, kokio tipo erdvę norite pridėti aplink elementą ar kitą objektą. Kaip matote toliau pateiktame paveikslėlyje, pamušalas yra tai, kas iš karto supa elementą, pasienyje, ir ribą už sienos.

Toliau pateiktame pavyzdyje mūsų paragrafas yra apsuptas sienos, įterptas paraštėmis, ir yra vietos dešinėje ir apačioje.

Dalis, kurioje yra paraštė ir pamušalas.

Anksčiau pateiktas pavyzdys buvo sukurtas naudojant toliau pateiktą kodą.

Pastraipos, kurioje yra paraštė ir pamušalas, pavyzdys.

Pirmajame kodo skirsnyje „margas kairėje: 2.5em;“ prideda kairę maržą 2, 5 em, kuri suteikia ištraukos teksto išvaizdą. Kaip parodyta pavyzdyje, šis atstumas yra ne pasienyje. Kitame skyriuje "padding: 0 7em 2em 0;" apibrėžia viršutinę, dešinę, apatinę ir kairę (pagal laikrodžio rodyklę). Yra „0“ viršutinė pagalvėlė, „7em“ dešininė pagalvėlė, apatinė pagalvė „2em“ ir 0 kairiosios pagalvėlės. Likusi šio pavyzdžio dalis yra apibrėžti, kaip turėtų būti matoma siena.

Skirtuko kūrimas naudojant CSS ir HTML

Kortelę galima sukurti HTML, koreguojant kairę elemento paraštę. Pvz., Šioje pastraipoje yra kairė 2, 5 pėdų riba nuo elemento, kuriame yra tekstas. CSS, norint sukurti šią kairę paraštę, yra parodyta žemiau.

 .tab {margin-left: 2.5em} 

Įdėję šį kodą į CSS failą, galime pritaikyti skirtuko klasę bet kuriam tekstui, kad sukurtume skirtuko išvaizdą. Priklausomai nuo jūsų poreikių, maržos kairioji vertė gali būti padidinta arba sumažinta.

Nors mes rekomenduojame aukščiau aprašytą metodą, kairėje pusėje esantis CSS taip pat gali būti įtrauktas į eilutę, kaip parodyta toliau pateiktame pavyzdyje.

5em kairiojo parašo pavyzdys.

5em kairiojo parašo pavyzdys.

  • Kaip įvesti tekstą į savo tinklalapį ar HTML?

Jei jums reikia pridėti papildomą erdvę po eilutės ar teksto dalies ir tai reikia padaryti tik vieną kartą, galite naudoti

žyma, kad dokumente būtų pridėta papildoma erdvė. Toliau pateikiamas pavyzdys, kaip galima taikyti šią techniką.

Šiame sakinyje yra pavyzdinio teksto.

Kaip matote, buvo sukurtos dvi pertraukos, kad būtų sukurta viršutinė erdvė.

Aukščiau pateiktas kodas sukurtų toliau pateiktą tekstą.

Šiame sakinyje yra pavyzdinio teksto.

Kaip matote, buvo sukurtos dvi pertraukos, kad būtų sukurta viršutinė erdvė.

Jei reikia, galima pridėti papildomų pertraukų. Tačiau rekomenduojame naudoti anksčiau minėtą CSS metodą, kad pridėtumėte pamušalą ir tarpą tarp teksto, jei tai daroma keliose vietose.