A meno che specificamente si aggiunge il codice HTML appropriato, un'immagine sulla tua pagina Web non avrà nessuna distanza di grondaia tra esso e qualsiasi altra immagine. La proprietà margin CSS o Cascading Style Sheet, aggiungerà spazio intorno a tutti e quattro i lati di un'immagine. Inoltre, gli attributi del tag img vspace e hspace aggiungerà spaziatura verticale e orizzontale intorno le immagini, rispettivamente. Infine, se si contenga ogni immagine all'interno di una sezione separata div, CSS proprietà padding inserirà spaziatura tra loro, pure.

Istruzioni

Aggiungere spazio con proprietà Margin

1

Tipo "< stile tipo =" text/css">" su una riga vuota sopra il < / head > tag, premere "Enter" due volte e quindi digitare "< / stile >" sulla riga vuota corrente. Mettendo la coppia di tag < style > nella sezione < head > della pagina Web crea un foglio di stile interno. Gli stili CSS personalizzati sono contenuti all'interno dello stile < > e < / stile > coppia di tag. Ad esempio, il codice HTML nella sezione < head > dovrebbe essere simile al seguente:

< style type = "text/css" >

< / stile >
< / head >

2

Digitare il codice CSS per aggiungere margini intorno tutte le immagini di pagina Web. Ad esempio, se si desidera circondano immagini con un margine di 10px, il codice di stile CSS dovrebbe simile al seguente:

< style type = "text/css" >
IMG {margin: 10px}
< / stile >
< / head >

Un margine di 10px visualizzerà sulla parte superiore, destra, inferiore e sinistro i lati di ogni immagine che contiene la pagina Web.

3

Salvare le modifiche e visualizzare in anteprima la pagina Web nel browser. Il codice CSS per uno stile interno si applica solo alla pagina Web a cui viene aggiunto. Se si desidera che i margini a comparire su tutte le immagini attraverso l'intero sito Web, aggiungere il codice CSS in un file di foglio di stile esterno e aggiungere un link al file su ogni pagina web.

Se si desidera aggiungere spazio a immagini specifiche su una pagina Web piuttosto che tutte le immagini, utilizzare uno stile in linea piuttosto che uno stile interno o esterno. Per esempio, se si desidera aggiungere 10px spaziatura tra quattro diverse immagini su una determinata pagina, il codice sarà simile al seguente:

< img src="img1.jpg" style = "margin: 10px" >
< img src="img2.jpg" style = "margin: 10px" >
< img src="img3.jpg" style = "margin: 10px" >
< img src="img4.jpg" style = "margin: 10px" >

Aggiungere Vspace e Hspace

4

Digitare l'attributo vspace per ogni immagine che si desidera inserire lo spazio sopra e sotto. Ad esempio, se si voleva un 10px, grondaia verticale sulle vostre immagini, il codice all'interno di ogni tag img dovrebbe essere simile al seguente:

< img src="img1.jpg" vspace = "10" >

5

Digitare l'attributo hspace per ogni immagine a cui si desidera aggiungere spazio orizzontale. Se si voleva una grondaia di 20 pixel a sinistra e a destra delle immagini, il codice all'interno di ogni tag di immagine dovrebbe essere simile al seguente:

< img src="img1.jpg" vspace = "10" hspace = "20" >

6

Salvare le modifiche e visualizzare in anteprima la pagina Web nel browser. Mentre vspace e hspace non fanno parte del HTML5 standard, browser come Firefox, Chrome e Internet Explorer ancora supporta gli attributi.

Immagini di rilievo all'interno del div

7

Digitare "< div >" prima e "< / div >" dopo ogni tag di immagine che si desidera aggiungere spazio tra. Ad esempio, se si lavora con quattro immagini diverse, il codice sarà simile al seguente:

< div >< img src="img1.jpg" >< / div >
< div >< img src="img2.jpg" >< / div >
< div >< img src="img3.jpg" >< / div >
< div >< img src="img4.jpg" >< / div >

8

Digitare lo stile CSS all'interno dei tag div che aggiungerà un'imbottitura intorno a ciascuna immagine. Per esempio, devi circondano ogni immagine con un margine interno 20px, lo stile dovrebbe essere simile al seguente: (Vedi riferimento 4)

< div style = "padding: 20px" >< img src="img1.jpg" >< / div >
< div style = "padding: 20px" >< img src="img2.jpg" >< / div >
< div style = "padding: 20px" >< img src="img3.jpg" >< / div >
< div style = "padding: 20px" >< img src="img4.jpg" >< / div >

La proprietà padding aggiungerà lo spazio all'interno dell'elemento div per il superiore, destro, inferiore e sinistra delle immagini.

9

Salvare le modifiche e visualizzare in anteprima la pagina Web nel browser.

Consigli & Avvertenze

• Creare una tabella per contenere le immagini e aggiungere l'attributo cellspacing nel tag di tabella per controllare la quantità di spazio tra le singole celle. Ad esempio, se si voleva aggiungere uno spazio di 20px intorno a ciascuna immagine, il codice del tag di tabella deve simile al seguente:
• < table cellspacing = "20" >
• Per rimuovere le linee che circondano ogni cella della tabella, aggiungere il seguente attributo (con le virgolette) nel tag di tabella:
• border = "0"
• Anteprima del tuo sito Web utilizzando browser diversi e su una varietà di dispositivi mobili. Regolare la spaziatura di immagine affinché gli spettatori come molti come possibile sarà in grado di vedere il tuo lavoro il modo desiderato.