Kaip sukurti HTML tarpą

click fraud protection

Pradedantiesiems interneto dizaineriams gali būti sunku suprasti erdves ir fizinį HTML elementų atskyrimą. Tai yra, nes HTML turi savybę, vadinamą „baltųjų erdvių žlugimu“. nesvarbu, ar įvedate 1 tarpą, ar 100 savo HTML kode, žiniatinklio naršyklė automatiškai sutraukia šias erdves į vieną erdvę. Tai skiriasi nuo tokios programos kaip Microsoft word, leidžiančią dokumentų kūrėjams pridėti kelias tarpus tarp atskirų žodžių ir kitų to dokumento elementų. Tai ne taip, kaip veikia svetainės dizaino tarpai.

Taigi, kaip pridėti tarpų HTML, kurie rodomi jūsų sukurtą tinklalapį? Šiame straipsnyje nagrinėjami keli būdai.

HTML kodas baltame fone
„RapidEye“ / „Getty Images“

Tarpai HTML su CSS

Pageidautinas būdas pridėti tarpus tarp HTML Kaskadiniai stiliaus lakštai (CSS). CSS turėtų būti naudojama norint pridėti bet kokius tinklalapio vaizdinius aspektus, o kadangi tarpai yra puslapio vizualinio dizaino charakteristikų dalis, CSS yra vieta, kur norite tai padaryti.

CSS galite naudoti arba paraštę, arba užpildo ypatybes, kad pridėtumėte vietos aplink elementus. Be to, teksto įtraukos ypatybė padidina tarpą teksto priekyje, pvz., Įtraukoms pastraipoms.

instagram viewer

Čia yra pavyzdys, kaip naudoti CSS norint pridėti vietos prieš visas pastraipas. Pridėkite šį CSS prie savo išorinis arba vidinis stiliaus lapas:

p {
teksto įtrauka: 3em;
}

Tarpai HTML viduje jūsų tekste

Jei norite tiesiog pridėti papildomą ar dvi tarpas prie savo teksto, galite naudoti nepertraukiamą tarpą. Šis simbolis veikia kaip standartinis tarpo simbolis, tik jis nesugriūva naršyklės viduje.

Štai pavyzdys, kaip pridėti penkias tarpus teksto eilutėje:

Šiame tekste yra penkios papildomos vietos

Naudoja HTML:

Šiame tekste yra penkios papildomos vietos

Taip pat galite naudoti
 žymą, kad pridėtumėte papildomų eilučių pertraukėlių.

Šio sakinio pabaigoje yra penki eilučių lūžiai 





Kodėl tarpai HTML yra bloga idėja

Nors šios parinktys veikia - nepertraukiamų tarpų elementas iš tikrųjų padidins jūsų teksto ir eilutės tarpus pertraukos pridės tarpų po aukščiau parodyta pastraipa - tai nėra geriausias būdas sukurti tarpą jūsų tinklo puslapis. Pridėjus šiuos elementus prie HTML, prie kodo pridedama vizualinė informacija, o ne atskiriama puslapio struktūra (HTML) nuo vaizdinių stilių (CSS). Geriausia praktika nurodo, kad jie turėtų būti atskirti dėl daugelio priežasčių, įskaitant lengvą atnaujinimą ateityje ir bendrą failo dydį bei puslapio našumas.

Jei naudojate išorinį stiliaus lapą, norėdami padiktuoti visus savo stilius ir tarpus, tada pakeisti tuos stilius visoje svetainėje yra lengva, nes jūs tiesiog turite atnaujinti tą vieną stiliaus lapą.

Apsvarstykite aukščiau pateiktą sakinio pavyzdį su penkiais
žymos jo pabaigoje. Jei norėtumėte, kad tarpai būtų kiekvienos pastraipos apačioje, turėtumėte pridėti šį HTML kodą prie kiekvienos visos svetainės pastraipos. Tai yra nemažai papildomų žymėjimų, kurie išpūs jūsų puslapius. Be to, jei nuspręsite, kad šis tarpas yra per didelis arba per mažas ir norite jį šiek tiek pakeisti, turėsite redaguoti kiekvieną atskirą pastraipą visoje savo svetainėje. Ne ačiū!

Užuot pridėję šiuos tarpo elementus prie savo kodo, naudokite CSS.

p {
kamšalo apačia: 20 taškų;
}

Ta viena CSS eilutė pridėtų tarpų po jūsų puslapio pastraipomis. Jei ateityje norėjote pakeisti tą tarpą, redaguokite šią vieną eilutę (vietoj visos svetainės kodo) ir viskas gerai!

Dabar, jei jums reikia pridėti vieną vietą vienoje savo svetainės dalyje, naudokite
žyma ar viena nepertraukiama erdvė nėra pasaulio pabaiga, tačiau reikia būti atsargiems. Naudojant šias įterptąsias HTML tarpų parinktis gali būti slidus šlaitas. Nors vienas ar du gali nepakenkti jūsų svetainei, jei eisite tuo keliu, į savo puslapius įeisite problemų. Galų gale geriau kreiptis į CSS dėl HTML tarpų ir visų kitų tinklalapio vaizdinių poreikių.

instagram story viewer