Kuinka luoda lisätilaa HTML:ään tai verkkosivulle

Ylimääräisen tyhjän tilan luominen verkkosivun HTML-koodiin voidaan saavuttaa monin tavoin riippuen siitä, minkä tilan haluat luoda. Seuraavat osiot sisältävät erilaisia ​​tapoja luoda lisätilaa käyttämällä sekä HTML- että CSS-syötteitä HTML-editorissa, kuten Dreamweaverissa, tai tekstieditorissa, kuten Notepad.

Ylimääräisten välilyöntien luominen ennen tai jälkeen tekstiä

Yksi hämmentävämmistä asioista uusille käyttäjille, jotka luovat verkkosivua, on se, että he eivät voi painaa välilyöntiä useita kertoja lisätäkseen välilyöntejä. Voit luoda ylimääräisiä välilyöntejä tekstin eteen, jälkeen tai väliin käyttämällä   (välilyönti) laajennettu HTML-merkki.

Jos esimerkiksi ilmaisu “ylimääräinen välilyönti” käyttää kaksoisvälilyöntiä, HTML-koodissamme on seuraava koodi.

extra    space

Pidä välilyönnit sivulle liitettävässä tekstissä

Jos liität tekstiä, jossa on ylimääräisiä välilyöntejä tai sarkainmerkkejä, voit käyttää HTML-tunnistetta

 pitääksesi tekstin muotoiltuna.  Alla on esimerkki tekstin liittämisestä ylimääräisillä välilyönneillä 
-tunnisteen avulla.

This    text   has    lots of     spaces
Yllä oleva esimerkki on tehty käyttämällä alla olevaa HTML-koodia.
<pre class="tab">This    text      has    lots of     spaces</pre>

Huomautus

Jos käytät WYSIWYG-editoria syöttääksesi yllä olevan koodin, sinun on oltava HTML-välilehdellä tai muokattava HTML-koodia.

Lisätilan luominen elementin tai objektin ympärille
Kaikkiin HTML-elementteihin voidaan lisätä ylimääräisiä välilyöntejä ylhäällä, oikealle, alas tai vasemmalle.  Varmista kuitenkin, että ymmärrät marginaalin ja täyteen eron, ennen kuin päätät, minkä tyyppisen tilan haluat lisätä elementin tai objektin ympärille.  Kuten alla olevasta kuvasta näkyy, pehmuste ympäröi elementtiä reunuksen sisällä ja marginaali reunuksen ulkopuolella.

Alla oleva esimerkki näyttää kappaleemme reunuksella, sisennettynä marginaalilla ja välilyönnillä oikealla ja alareunalla.
Esimerkki kappaleesta, jossa on marginaali ja täyte.
Yllä oleva esimerkki luotiin alla olevalla koodilla.
<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>
Koodin ensimmäisessä osassa "margin-left: 2.5em;"  lisää 2,5 em:n vasemman marginaalin, joka antaa vaikutelman sisennetystä tekstistä.  Kuten esimerkistä näkyy, tämä väli on reunan ulkopuolella.  Seuraavassa osiossa "täyte: 0 7em 2em 0;"  määrittää ylä-, oikea-, ala- ja vasemman (myötäpäivään) pehmusteen.  Siinä on "0" ylätäyttö, "7em" oikea pehmuste, "2em" alatäyttö ja 0 vasen täyttö.  Tämän esimerkin loppuosa määrittää, miltä rajan pitäisi näyttää.
Välilehden luominen CSS:n ja HTML:n avulla
Välilehti voidaan luoda HTML-kielessä säätämällä elementin vasenta marginaalia.  Esimerkiksi tämän kappaleen vasen marginaali on 2,5 em tekstin sisältävästä elementistä.  CSS tämän vasemman marginaalin luomiseksi näkyy alla.
.tab {
 margin-left: 2.5em
}
Kun olet sijoittanut tämän koodin CSS-tiedostoomme, voimme käyttää "tab"-luokkaa mihin tahansa tekstiin luodaksemme välilehden ulkonäön.  Marginaalivasemman arvoa voidaan lisätä tai vähentää tarpeidesi mukaan.
Vaikka suosittelemme yllä olevaa menetelmää, marginaalin vasen CSS voidaan myös lisätä riviin, kuten alla olevassa esimerkissä näkyy.
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
Esimerkki 5em vasemmasta marginaalista.
Lisää tilaa tekstirivin tai kappaleen alle
Voit lisätä ylimääräistä tilaa tekstirivin tai kappaleen alle tai painaa tekstiä alemmas sivulla kerran käyttämällä 
-tunnistetta.  Alla on esimerkki siitä, kuinka tätä tekniikkaa voidaan soveltaa.
<p>This sentence contains  example text.<br>
<br>
As you can see, two breaks add the space above.</p>
Yllä oleva koodi luo alla näkyvän tekstin.
Tämä lause sisältää esimerkkitekstiä.
Kuten näet, kaksi taukoa lisää tilaa yläpuolelle.
Lisää taukoja voidaan lisätä tarvittaessa.  Suosittelemme kuitenkin käyttämään aiemmin mainittua CSS-menetelmää lisätäksesi täyttöjä ja välilyöntejä tekstin ympärille, jos se tehdään useissa paikoissa sivulla.
Lisää rivivälit tekstirivien väliin
Tekstirivien välistä väliä voidaan säätää lisäämällä ja pienentämällä rivin korkeutta CSS:n avulla tekstin lukemisen helpottamiseksi.  Alla on esimerkki ylimääräisestä rivivälistä, joka lisätään tekstikappaleeseen.
<p style="line-height:3.5em;">Text shown below with extra spacing</p>
Yllä oleva koodi luo alla näkyvän tekstin.
Tämä esimerkkiteksti on esimerkki siitä, kuinka tekstiin voidaan lisätä ylimääräistä tilaa rivien väliin.  Emme kuitenkaan suosittele käyttämään näin paljon rivitilaa, koska se vaikeuttaa lukemista.  Käytämme vain näin paljon riviväliä esimerkkinä.
Yllä olevassa esimerkissä käytimme rivin korkeudena 3,5 em rivien välisen etäisyyden korostamiseksi.  Luettavuuden vuoksi suosittelemme kuitenkin käyttämään noin 1,7 em.  Rivivälien lisääminen parantaa aina tekstin luettavuutta.  Liian paljon lisääminen voi kuitenkin vaikeuttaa seuraamista ja skannausta.