Guida base al CSS

Hai un testo e una immagine. Vorresti disporre l'immagine a destra o a sinistra, in alto o in basso rispetto al testo. Quello che prima potevi fare con il tag HTML align adesso lo puoi fare con il CSS. Per andare a definire gli spazi dell'immagine dagli altri elementi circostanti (altre immagini o testi) o l'allineamento del testo con l'immagine, si usa il CSS in quanto i vecchi codici "align" delle immagini non sono più supportati dall' HTML5.
Per l'allineamento del testo rispetto all' immagine in verticale scegli una delle voci del vertical-align: bottom | middle | top
Esempio con "bottom":

<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:bottom">

Guarda il risultato per capire meglio l'allineamento verticale:

immagine con allineamento "vertical-align:bottom":

testo testo testo testo testo testo testo testo testo testo

immagine con allineamento "vertical-align:middle":

testo testo testo testo testo testo testo testo testo testo

immagine con allineamento "vertical-align:top":

testo testo testo testo testo testo testo testo testo testo

Se vogliamo mettere l'immagine tutta a destra o tutta a sinistra non potremo più usare gli attributi ALIGN ormai deprecati, bensì useremo FLOAT con il CSS. Possiamo impostare left o right:

<img src="smiley.gif" style="float:left">

Esempio con float left (cioè immagine tutta a sinistra):

Testo testo testo testo testo

Esempio con float right (cioè immagine tutta a destra):

Testo testo testo testo testo

Se inoltre vuoi lasciare un po' di spazio a destra o a sinistra, in alto o in basso, rispetto al testo che circonda l'immagine, quello che prima potevi fare con i tag HTML HSPACE o VSPACE, lo puoi fare con il CSS usando questa sintassi:

<img style="margin: 2px 2px 2px 2px">

dove i valori dei quattro margini impostati sono rispettivamente: alto, destra, basso e sinistra.