Alkujen suunnittelijalle voi olla vaikea ymmärtää HTML-koodien välien luomista ja elementtien fyysistä erottamista. Tämä johtuu siitä, että HTML on ominaisuus, joka tunnetaan nimellä "tyhjätilan romahdus". kirjoitatpa HTML-koodiin 1 välilyönnin tai 100, verkkoselain kutsuu nämä tilat automaattisesti yhteen ainoaan tilaan. Tämä eroaa samanlaisesta ohjelmasta Microsoft Word, jonka avulla asiakirjan luojat voivat lisätä useita välilyöntejä erottaakseen sanat ja muut asiakirjan osat. Näin verkkosivujen suunnittelu ei toimi.
Joten miten lisäät välilyöntejä HTML-koodissa, jotka näkyvät rakentamasi verkkosivun? Tässä artikkelissa tarkastellaan joitain eri tapoja.
Spaces in HTML with CSS
Ensisijainen tapa lisätä välilyöntejä HTML-koodissasi on CSS-tyylisivut. CSS: ää tulisi käyttää verkkosivun mahdollisten visuaalisten ominaisuuksien lisäämiseen, ja koska väli on osa sivun visuaalisen suunnittelun ominaisuuksia, CSS on siellä, missä haluat tämän tapahtuvan.
CSS: ssä voit käyttää joko marginaalia tai täyteominaisuuksia lisätäksesi tilaa elementtien ympärille. Lisäksi teksti-luetelmakohta -ominaisuus lisää tilaa tekstin etuosaan, kuten kappaleiden sisennykseen.
Tässä on esimerkki siitä, miten CSS: n avulla lisätään tilaa kaikkien kappaleidesi eteen. Lisää seuraava CSS omaan ulkoinen tai sisäinen tyylilehti:
p {
teksti-luetelmakohta: 3em;
}
Tila HTML: ssä tekstisi sisällä
Jos haluat vain lisätä ylimääräisen tilan tai kaksi tekstiin, voit käyttää tilaa, joka ei ole katkeamatonta. Tämä merkki toimii aivan kuten tavallinen välilyönti, vain se ei romahdu selaimen sisällä.
Tässä on esimerkki viiden välilyönnin lisäämisestä tekstiriville:
Tämän tekstin sisällä on viisi ylimääräistä välilyöntiä
Käyttää HTML-koodia:
Tämän tekstin sisällä on viisi ylimääräistä välilyöntiä
Voit käyttää myös
Lisää ylimääräisiä rivikatkoja.
Tämän lauseen lopussa on viisi rivinvaihtoa
Miksi välilyönti HTML: ssä on huono idea
Vaikka nämä vaihtoehdot toimivat molemmat - katkeamattomat välilyöntielementit lisäävät välilyöntejä tekstiin ja riviin tauot lisäävät välimatkan yllä olevan kappaleen alle - tämä ei ole paras tapa luoda välilyönti Nettisivu. Näiden elementtien lisääminen HTML-koodiin lisää visuaalista tietoa koodiin sen sijaan, että sivun (HTML) rakenne erotettaisiin visuaalisista tyyleistä (CSS). Parhaiden käytäntöjen mukaan näiden tulisi olla erillisiä useista syistä, mukaan lukien päivityksen helppous tulevaisuudessa ja tiedoston koko ja sivun suorituskyky.
Jos käytät ulkoista tyylitaulukkoa kaikkien tyyliesi ja väliesi sanelemiseen, kyseisten tyylien muuttaminen koko sivustolle on helppoa, koska sinun on vain päivitettävä kyseinen tyylitaulukko.
Tarkastellaan lauseen edellä olevaa esimerkkiä viidellä
tunnisteet sen lopussa. Jos haluat sellaisen määrän väliä jokaisen kappaleen alareunaan, sinun on lisättävä kyseinen HTML-koodi koko sivustosi jokaiseen kappaleeseen. Se on kohtuullinen määrä ylimääräisiä merkintöjä, jotka paisuttavat sivujasi. Lisäksi, jos päätät tiellä, että tämä väli on liian suuri tai liian pieni ja haluat muuttaa sitä hieman, sinun on muokattava jokaista kappaletta koko verkkosivustollasi. Ei kiitos!
Käytä CSS: ää sen sijaan, että lisäät nämä välielementit koodiin.
p {
pehmustepohja: 20px;
}
Tämä yksi CSS-rivi lisäisi välilyöntiä sivusi kappaleiden alle. Jos haluat muuttaa väliä tulevaisuudessa, muokkaa tätä yhtä riviä (koko sivustosi koodin sijaan) ja olet hyvä mennä!
Jos sinun on nyt lisättävä yksi tila verkkosivustosi yhteen osaan, käytä a
Tunniste tai yksittäinen murtumaton tila ei ole maailman loppu, mutta sinun on oltava varovainen. Näiden sisäisten HTML-välivaihtoehtojen käyttäminen voi olla liukas kaltevuus. Vaikka yksi tai kaksi ei välttämättä vahingoita sivustoasi, jatkat tällä polulla, mutta ongelmat syntyvät sivuillesi. Loppujen lopuksi sinun on parempi kääntyä CSS: n puoleen HTML-välien ja kaikkien muiden verkkosivujen visuaalisten tarpeiden suhteen.