imbottitura extra su immagini collegate (in tutti i browser)

Question

Sto avendo un problema con ottenere chilo in più sul elemento di collegamento con un'immagine interna. Succede in tutti i browser, Safari, Firefox, IE.

Ho applicato un foglio di stile per il reset, quindi non ci dovrebbero essere margini extra sul padding, ma dopo l'ispezione è chiaro che l'elemento a ha del padding inferiore extra da nessuna parte. Qualche idea?

Ecco il markup e CSS:

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie { 
padding: 0 0 11px 0; 
background: url(../img/bg-shadow-movie.png) bottom no-repeat; 
} 

div.home-col .movie a { 
display: block; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
} 

div.home-col .movie img { 
padding: 4px; 
margin: 0; 
border: 1px solid #d0d0d0; 
} 

Answer 1

L'immagine di sfondo per la classe di film apparirà in fondo sia la casella e imbottitura applicata ad esso, in modo da utilizzare il seguente se si serve lo spazio di 11 px nella parte inferiore dell'immagine.

div.home-col .movie { 
margin: 0 0 11px 0; 
background: url(../img/bg-shadow-movie.png) bottom no-repeat; 
} 

Answer 2

Hai provato l'aggiunta di imbottitura per:

div.home-col .movie a { 
display: block; 
padding: 0 0 0 0; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
} 

Se forse non si potrebbe aggiungere a: visited per testarlo per vedere se qualcosa cambia.

Answer 3

Prova ad aggiungere la seguente riga all'elemento di collegamento: altezza riga: 0;

div.home-col .movie a { 
display: block; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
line-height: 0; 
} 

Answer 4

Sei sicuro che sia tutto il CSS? Non riesco a vedere il problema che stai descrivendo in questa pagina di test: http://www.pauldwaite.co.uk/test-pages/3532870/

Answer 5

Ciao ho avuto lo stesso problema e ho scoperto che se si allinea verticalmente l'immagine verso il basso verrà risolto.

Image inside div has extra space below the image

Answer 6

Aggiunta style = "padding: 0px;" risolto il problema per me.

Answer 7

scusa per rispondere a questa domanda 3 anni dopo, ma questa pagina è nella prima pagina di google e mi sento responsabile ..... risposta: aggiungi solo "vertical-align: top;" a img tag all'interno di un tag .