Immagine con margine automatico dentro un elemento blocco

Se abbiamo un doctype html5 (o uno più rigoroso come quello strict) ed inseriamo un’immagine all’interno di un elemento blocco noteremo l’aggiunta di un margine automatico inferiore. Questo accade perchè l’immagine essendo renderizzata come contenuto inline (come un testo) crea lo spazio al di sotto della linea (spazio discensore) che serve ad ospitare lettere come: y,g,q. Per risolverlo occorre inserire un display:block oppure un vertical-align qualunque all’immagine in questione.

<!DOCTYPE html>
<div>
    <img src="bannerSlide.jpg" alt="prova immagine" />
</div>
img{display:block}
/* OPPURE */
img{vertical-align:top}
Vai all'archivio
  • Simone

    Tks

    • Antonio Polese

      😉

  • Ottimo suggerimento, sempre valido.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github