HTML ASP-VBscript Le Razze Canine Cinema Escursioni Forum Area Blog
Vai in Home Page  |  Indice della Guida Semplice al linguaggio HTML

HTML: distanziare le immagini dal testo

Utilizzare lo spazio per migliorare l'impaginazione

Gestire la distanza tra immagini e testo con semplici parametri HTML

Riprendiamo l'esempio del gatto che precedentemente aveva allineato in piu' modi. Nel caso volessimo siamo allineare un'immagine che distanziarla considerevolmente dal testo possiamo aggiungere un parametro al TAG IMG e indicare la misura precisa. I parametri utili sono:

  • HSPACE   (Horizontal Space, ossia lo spazio tra il testo e l'immagine misurato in orizzontale)
  • VSPACE   (Vertical Space, ossia lo spazio tra il testo e l'immagine misurato in verticale)
Esempio di spaziatura orizzontale:

<IMG SRC="img/foto_gatto.jpg" ALT="Questa è la foto di un gatto allineata a destra del testo con spaziatura orizzontale pari a 20" BORDER="0" ALIGN="RIGHT" HSPACE="20"> testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

il risultato:

Questa è la foto di un gatto allineata a destra del testo con spaziatura orizzontale pari a 20 testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

L'immagine del gatto dista 20 pixel (unità di misura dei monitor, un pixel = un punto) dal testo. La distanza ha effetto sia a sinistra che a destra. Potete provare a distanziare per 40,60 o piu' pixel. Anche qui l'importante è non esagerare. Il paramtro utilizzato nel codice è HSPACE .

E' possibile anche fare una prova con VSPACE per determinare lo spazio in verticale:

<IMG SRC="img/foto_gatto.jpg" ALT="Questa è la foto di un gatto allineata a destra del testo con spaziatura orizzontale pari a 20 e spaziatura verticale pari a 40" BORDER="0" ALIGN="RIGHT" HSPACE="20" VSPACE="40"> testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

il risultato:

Questa è la foto di un gatto allineata a destra del testo con spaziatura orizzontale pari a 20 e spaziatura verticale pari a 40 testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

In questo caso abbiamo indicato una spaziatura verticale VSPACE uguale a 40 (VSPACE="40") e l'effetto derivato è piuttosto evidente. Lavorando con questi parametri e provando varie soluzioni è possibile ottenere le giuste proporzioni in base al testo.

Nota Finale:
Omettendo i valori HSPACE e VSPACE il valore assegnato automaticamente dal browser sarà "0" quindi le vostre immagini saranno sempre a stretto contatto con il testo.

Indice