Miten luoda tilaa kuvien väliin Web-sivu

Oikea kuva väli auttavatvisuaalinen virtaussisältöä Web-sivuille . ronstik / iStock / Getty Images

Ellet nimenomaan lisätä oikea HTML, kuvan Web-sivulla ei ole katuojaan väli se ja muut kuva.CSS tai Cascading Style Sheet, marginaali ominaisuus lisää tilaa noin kaikille neljälle sivulle kuvan.Lisäksi, vspace ja hspace img tag attribuutteja lisää pysty- ja vaaka välit noin kuvia, vastaavasti.Lopuksi, jos sisältää kunkin kuvan erillisessä div osio, CSS padding kiinteistön lisätä väli ne, samoin.

Lisää Space With margin ominaisuus

  1. tyyppi "& lt; style type =" text / css "& gt;"on tyhjä rivi yläpuolella & lt; / head & gt;tag, paina "Enter" kahdesti, ja kirjoita sitten "& lt; / tyyli & gt;"nykyiseen tyhjä rivi.Sijoittaminen & lt; tyyli & gt;tag pari sisällä & lt; head & gt;osa Web-sivun luo sisäinen tyylisivu.Custom CSS-tyylejä ovat sisällä & lt; tyyli & gt;ja & lt; / tyyli & gt;tag pari.Esimerkiksi HTML-koodiin & lt; head & gt;kohta tulee muistuttaa seuraavasti:

    & lt; style type = "text / css" & gt;

    & lt; / tyyli & gt;
    & lt; / head & gt;

  2. Kirjoita CSS lisätä reunukset kaikki Web-sivun kuvia.Jos esimerkiksi haluat surround kuvia 10px marginaali, CSS tyyli koodinumero tulee muistuttaa seuraavasti:

    & lt; style type = "text / css" & gt;
    img {margin: 10px}
    & lt; / tyyli & gt;
    & lt; / head & gt;

    10px marginaali näkyy ylhäällä, oikealla, alhaalla ja vasemmalla puolella jokaisen kuvan Web-sivu sisältää.

  3. Tallenna muutokset ja esikatsella Web-sivu selaimessa.CSS koodi sisäinen tyyli sovelletaan vain Web-sivun, johon se lisätään.Jos haluat marginaalit näkyvän kaikilla kuviaan koko sivuston, lisätä CSS ulkoiseen tyylisivut ja lisätä linkin tiedoston jokaisen sivun.

    Jos haluat lisätä tilaa erityisiä kuvien Web-sivun sijaan kaikki kuvat, käyttää in-line tyyliin pikemminkin kuin sisäinen tai ulkoinen tyyli.Jos esimerkiksi haluat lisätä 10px väli neljä erilaista kuvaa tietyllä sivulla, koodin pitäisi näyttää tältä:

    & lt; img src = "img1.jpg" style = "margin: 10px" & gt;
    & lt; img src = "img2.jpg" style = "margin: 10px" & gt;
    & lt; img src = "img3.jpg" style = "margin: 10px" & gt;
    & lt; img src = "img4.jpg" style = "margin: 10px" & gt;

Lisää vspace ja hspace

  1. Kirjoita vspace määrite jokaisen kuvan haluat lisätä tilaa ylä- ja alapuolella.Esimerkiksi, jos halusi 10px, pystysuora gutter vaikuttaa kuvien, koodi kussakin img tag tulisi näyttää seuraavalta:

    & lt; img src = "img1.jpg" vspace = "10" & gt;

  2. Kirjoita hspace määrite kunkin kuva, johon haluat lisätä tilaa vaakasuunnassa.Jos halusi 20 pikselin katuojaan vasemmalle ja oikealle kuvia, koodi kussakin kuvan tagi näyttää seuraavalta:

    & lt; img src = "img1.jpg" vspace = "10" hspace = "20"& gt;

  3. Tallenna muutokset ja esikatsella Web-sivu selaimessa.Vaikka vspace ja hspace eivät kuulu HTML5 standardin, selaimissa, kuten Firefox, Chrome ja Internet Explorer edelleen tukea ominaisuuksia.

Pad kuvat Inside Divs

  1. tyyppi "& lt; div & gt;"ennen ja "& lt; / div & gt;"jokaisen kuvan tunnisteen haluat lisätä väliin.Esimerkiksi, jos olet työskennellyt neljä eri kuvia, koodi näyttää seuraavasti:

    & lt; div & gt; & lt; img src = "img1.jpg" & gt; & lt; / div & gt;
    & lt; div & gt; & lt; img src = "img2.jpg" & gt; & lt; / div & gt;
    & lt; div & gt; & lt; img src = "img3.jpg" & gt; & lt; / div & gt;
    & lt; div & gt; & lt; img src = "img4.jpg" & gt; & lt; / div & gt;

  2. Kirjoita CSS sisällä div tunnisteita, lisää täyte ympärille kuvan.Esimerkiksi, jos sinun täytyy ympäröidä jokaisen kuvan kanssa 20px katuojaan tila, tyyli tulee muistuttaa seuraavasti: (Katso viite 4)

    & lt; div style = "padding: 20px" & gt; & lt; img src = "img1.jpg "& gt; & lt; / div & gt;
    & lt; div style = "padding: 20px" & gt; & lt; img src = "img2.jpg" & gt; & lt; / div & gt;
    & lt; div style = "padding: 20px" & gt; & lt; img src = "img3.jpg" & gt; & lt; / div & gt;
    & lt; div style = "padding: 20px" & gt; & lt; img src = "img4.jpg" & gt; & lt; / div & gt;

    padding ominaisuus lisää tilaan div alkuun, oikealla, alhaalla ja vasemmalla puolella kuvien.

  3. Tallenna muutokset ja esikatsella Web-sivu selaimessa.

Vinkkejä & amp;Varoitukset

  • Luo taulukko sisältää kuvia ja lisätä cellspacing attribuutin taulukon tag valvoa määrä väli yksittäisten solujen.Esimerkiksi, jos halusi lisätä 20px tilaa noin jokaisen kuvan, taulukon tunniste koodi tulee muistuttaa seuraavasti:
  • & lt; pöytä cellspacing = "20" & gt;
  • Voit poistaa rivit ympäröivä kunkin taulukon solun, lisää seuraava määrite (lainausmerkkejä) taulukon tag:
  • border = "0"
  • esikatselu sivuston avulla eri selaimilla ja erilaisillamobiililaitteisiin.Tehdä muutoksia kuvasi välit, jotta mahdollisimman monet katsojat kuin mahdollista voivat nähdä työsi niin kuin tarkoitettu.

Resurssit

  • W3Schools: CSS marginaali
  • W3Schools: HTML & lt; img & gt;Hspace Taito
  • W3Schools: HTML & lt; img & gt;Vspace Taito
  • W3Schools: CSS Padding
  • W3Schools: HTML & lt; pöytä & gt;Cellspacing Taito
170
0
1
Web Suunnittelu