Scopri come avvolgere il testo attorno a un'immagine flottata con CSS.
Per far avvolgere il testo intorno all'immagine a destra, in modo simile a come è nella foto che introduce questo articolo, usa una regola CSS come questa:
La regola float: left fa spostare l'immagine sul margine sinistro. La regola padding-right impedisce al testo di urtare contro il lato destro dell'immagine. Se fosse stato aggiunto un bordo a questa immagine, il riempimento verrebbe posto tra l'immagine e il bordo. Vedere la Sezione 2 per lavorare con un'immagine con un bordo.
Quindi, aggiungi i margini a sinistra e a destra dell'immagine per centrarla. Il valore corretto per i margini sinistro e destro per centrare qualsiasi cosa è auto.
Per creare un bordo spesso simile a una cornice utilizzando lo stile del bordo scanalato, è possibile utilizzare una regola come questa:
Altri stili di bordo sono solido, punteggiato, tratteggiato, doppio, cresta, inserto e inizio. La larghezza può essere espressa in pixel, ems o percentuali.
I bordi possono essere applicati selettivamente alla parte superiore, destra, inferiore e sinistra dell'immagine. Puoi usare questa conoscenza per creare un effetto come un'ombra esterna.
Usando un bordo solido in 2 tonalità di grigio solo sul bordo destro e inferiore, ottieni un effetto ombra esterna.
img { float: left; stile bordo destro: solido; larghezza bordo-destra: 8px; bordo-destro-colore: #CCCCCC; stile bordo inferiore: solido; larghezza bordo-basso: 8px; colore del bordo inferiore: #999999; margine destro: 1em; margine inferiore: 1em; }
Consiglio
Se hai immagini in più di una divisione (div) di una pagina, usa i selettori discendenti per modellarle individualmente. Selettori possibili: #content img, #sidebar img, #feature img.
