Luo tilat ja elementtien fyysinen erotus HTML: ssä CSS: n avulla
Tilojen luominen ja elementtien fyysinen erottaminen HTML: ssä voi olla vaikea ymmärtää alun web-suunnittelijaa varten. Tämä johtuu siitä, että HTML: ssä on ominaisuus, joka tunnetaan nimellä "välilyönnin romahtaminen". riippumatta siitä, kirjoitatko 1 välilyönnin tai 100 HTML-koodissasi, web-selain laskee automaattisesti nämä tilat yhteen ainoaan tilaan. Tämä eroaa ohjelmasta, kuten Microsoft Word , jonka avulla asiakirjojen luojat voivat lisätä useita tiloja sanojen ja muiden asiakirjan osien erottamiseen.
Tämä ei ole sitä, miten sivuston suunnittelun välimatka toimii.
Joten, kuinka lisäät valkoiset tilat HTML-muodossa, jotka näkyvät verkkosivulla ? Tässä artikkelissa tarkastellaan joitain eri tavoin.
Välilyöntejä HTML: ssä CSS: n kanssa
Ensisijainen tapa lisätä välilyöntejä HTML: ssä on CSS-tyylitiedostot (CSS) . CSS: n tulisi käyttää verkkosivujen visuaalisten näkökohtien lisäämiseen ja koska välimatka on osa sivun visuaalista suunnittelua, CSS on se paikka, johon haluat sen tehdä.
CSS: ssä voit käyttää marginaali- tai täyttöominaisuuksia lisätäksesi tilaa elementtien ympärille. Lisäksi teksti-sisennysominaisuus lisää tilaa tekstin etupuolelle, kuten kappaleiden sisennykseen.
Tässä on esimerkki siitä, kuinka voit käyttää CSS: ää lisätäksesi tilaa kaikkien kappaleiden eteen. Lisää seuraava CSS ulkoiseen tai sisäiseen tyyliarkistoosi:
p {
teksti-indent: 3em;
}
Spaces in HTML: Tekstin sisällä
Jos haluat vain lisätä lisää tilaa kahdelle tekstille, voit käyttää ei-rikkomatta tilaa.
Tämä merkki toimii samoin kuin tavallinen avaruusmerkki, mutta se ei romahda selaimen sisällä.
Tässä on esimerkki siitä, miten lisätään viisi tilaa tekstin viereen:
Tässä tekstissä on viisi lisäpinta-alaa
Käyttää HTML:
Tämä teksti on & nbsp; & nbsp; & nbsp; & nbsp; viisi lisätilaa sen sisällä
Voit lisätä myös ylimääräisiä rivejä käyttämällä Tunniste-painiketta.
Tässä lauseessa on viisi rivinvaihtoa sen lopussa
Miksi Spacing HTML on huono idea
Vaikka nämä vaihtoehdot toimivat - ei-rikkomatta välilyöntielementti lisää tekstin välitavoitetta ja rivinvaihdot lisäävät välimatkaa edellä esitetyn kohdan alle - tämä ei ole paras tapa luoda välilyöntiä verkkosivustollasi. Näiden elementtien lisääminen HTML-koodiin lisää visuaalisia tietoja koodiin sen sijaan, että erotettaisiin sivun (HTML) rakenne visuaalisista tyylistä (CSS). Parhaat käytännöt edellyttävät, että niiden pitäisi olla erillisiä useista syistä, mukaan lukien päivittämisen helppous tulevaisuudessa ja koko tiedostokoko ja sivun suorituskyky.
Jos käytät ulkoista tyyliarkkia sanelemaan kaikki tyylisi ja välimatkaasi, muuttaminen koko sivuston tyylejä varten on helppoa, koska sinun on vain päivitettävä tämä tyyliarkki.
Harkitse esimerkin yläpuolella olevaa esimerkkiä viiden ja tageilla sen lopussa. Jos haluat, että jokaisen kappaleen alareunassa oleva etäisyys on välttämätöntä, sinun on lisättävä tämä HTML-koodi jokaiseen sivustosi jokaiseen kohtaan. Tämä on melko ylimääräinen lisämerkintä, joka paisuttaa sivuja.
Lisäksi, jos päätät tieltä, että tämä välimatka on liian suuri tai liian pieni, ja haluat muuttaa sen hieman, sinun on muokattava jokaisen yksittäisen kohdan koko verkkosivustollasi. Ei kiitos!
Sen sijaan, että lisäät nämä välilyönnit elementteihisi, käytä CSS: ää.
p {
padding-bottom: 20px;
}
Tämä yksi CSS-rivin lisää välilyöntejä sivusi kappaleiden alle. Jos haluat muuttaa tätä välinettä tulevaisuudessa, muokkaa tätä riviä (koko sivustokoodin sijaan) ja olet hyvä mennä!
Nyt, jos haluat lisätä yhden tilan yhdellä sivustosi osalla,
tagin tai yksittäisen rikkomaton tila ei ole maailman loppu, mutta sinun on oltava varovainen.
Näiden HTML-välimatka-alueiden käyttäminen voi olla liukas kaltevuus. Vaikka yksi tai kaksi eivät ole vahingoittaneet sivustosi, jos jatkat tätä polkua, otat ongelmia sivuillesi. Loppujen lopuksi sinun on parasta vaihtaa CSS: n HTML-välimatka ja kaikki muut verkkosivun visuaaliset tarpeet.