Luo ylimääräistä tilaa HTML-web-sivu voidaan saavuttaa monia tapoja riippuen tilaa haluat luoda. Seuraavat osiot sisältävät monia eri tapoja luoda ylimääräistä tilaa käyttäen sekä HTML ja CSS.,
Luo ylimääräisiä välilyöntejä ennen tai jälkeen teksti
Yksi hämmentävä asioita uusille käyttäjille, jotka olet luomassa web-sivu on, että he ei paina välilyöntiä useita kertoja, tehdä ylimääräisiä välilyöntejä. Luoda ylimääräisiä välilyöntejä ennen, jälkeen tai in-välillä tekstiä, käytä (non-breaking space) laajennettu HTML-merkki.
esimerkiksi ”ylimääräistä tilaa” meillä on seuraava koodi HTML.,
extra space
Jos käytät WYSIWYG-editori voit kirjoittaa koodin edellä, sinun täytyy olla HTML-välilehti tai muokkaamalla HTML-koodia.
on luettelo Extended special HTML-merkeistä, katso: extended special HTML-merkkien täydellinen listaus.
Pitää väli tekstiä, joka on kopioitu suoraan sivulla
Jos olet liittämällä tekstin kanssa ylimääräisiä välilyöntejä tai välilehtiä, voit käyttää HTML: <ennen> – tagin pitää muotoiltu teksti., Alla on esimerkki siitä, miten liittää tekstiä ylimääräisiä välilyöntejä käyttäen <ennen> – tagin.
This text has lots of spaces
yllä oleva esimerkki tehdään alla olevalla HTML-koodilla.
<pre class="tab">This text has lots of spaces</pre>
- Katso HTML: <ennen> tag sivun lisätietoja tästä tag.
Jos käytät WYSIWYG-editoria syöttääksesi koodin yllä, sinun täytyy olla HTML-välilehdessä tai muokata HTML-koodia.,
Luo ylimääräistä tilaa ympärillä elementti tai esine
Tahansa HTML-elementti voi olla ylimääräisiä väli lisätään ylhäällä, oikealla, alhaalla tai vasemmalle. Varmista kuitenkin, että ymmärrät marginaalin ja pehmusteen eron ennen kuin päätät, millaisen tilan haluat lisätä elementin tai kohteen ympärille. Kuten alla olevasta kuvasta näkyy, pehmuste ympäröi elementtiä, rajaa ja marginaalia rajan ulkopuolella.
alla Oleva esimerkki osoittaa, meidän kohta reunuksen, sisennetty marginaali ja riviväli on oikeassa ja alareunassa.,
esimerkki kohdassa, jossa marginaali ja täyte.
yllä oleva esimerkki on luotu alla olevan koodin avulla.
ensimmäisessä osassa koodia, ”margin-left: 2.5 em;” lisää vasen marginaali 2,5 em, joka antaa vaikutelman sisennetty teksti. Kuten esimerkki osoittaa, tämä väli on rajan ulkopuolella. Seuraavassa jaksossa ”pehmuste: 0 7EM 2em 0;” määritellään ylä -, oikea -, pohja-ja vasen (myötäpäivään) pehmuste. On” 0 ” top pehmuste,” 7em ”oikea pehmuste,” 2em ” pohja pehmuste, ja 0 vasen pehmuste., Loppuosa tästä esimerkistä määrittelee, miltä rajan pitäisi näyttää.
välilehden luominen CSS: ää ja HTML
välilehti voidaan luoda HTML: ssä säätämällä elementin vasenta marginaalia. Esimerkiksi tämän kohdan vasen marginaali on 2,5 em tekstin sisältävästä elementistä. CSS luoda tämän vasemman marginaalin on esitetty alla.
.tab { margin-left: 2.5em}
saattamisen Jälkeen tämä koodi meidän CSS-tiedoston, voimme soveltaa ”tab” – luokan tekstiä luoda ulkonäkö-välilehti. Marginaalivasemmiston arvoa voi kasvattaa tai laskea tarpeen mukaan.,
Vaikka suosittelemme menetelmä edellä, margin-left CSS voi myös olla lisätty inline, kuten esimerkissä alla.
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
esimerkki 5em vasen marginaali.
- miten luetelmakohdan tai välilehtitekstin verkkosivullani tai HTML: ssä?
Lisää tilaa alla rivi tai kappale tekstiä
Jos haluat lisätä ylimääräistä tilaa alla rivin tai kappaleen tekstin, ja tarvitsee vain tehdä se kerran, voit käyttää <br> – tagin. Alla on esimerkki siitä, miten 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 tekstin alla.
tämä lause sisältää esimerkkitekstiä.
kuten näet, kaksi taukoa lisää yllä olevaa tilaa.
lisätaukoja voidaan tarvittaessa lisätä. Suosittelemme kuitenkin aiemmin mainitun CSS-menetelmän avulla lisäämään pehmusteen ja välit tekstin ympärille, jos se tehdään useassa paikassa sivulla.
lisätietoja
- Miten yhdenmukaistaa tekstin web-sivun HTML-tai CSS.
- miten luodaan muokkaamaton HTML-teksti.
- katso lisätietoja ja niihin liittyviä linkkejä white space definition-sivustolta.,
- HTML ja web design help and support.