indesiderati padding-bottom di un div

Ecco il mio html:indesiderati padding-bottom di un div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<div style="border:1px solid red; float:left; padding:0;"> 
    <img src="xxx.jpg"> 
</div>

Non so perché il div contiene alcune padding-bottom persino ho impostato padding: 0.

Se rimuovo DOCTYPE, questo problema non si verificherà. Esistono altri modi per risolvere questo problema senza rimuovere DOCTYPE?

fonte

2009-10-05 Alan

Si tratta di un problema in ogni browser? – rahul

Domanda interessante. Mi ha fatto pensare all'altezza della linea e al modello della scatola. +1 – Abinadi

È comune in vari programmi utente quando l'elemento image è l'elemento solitario all'interno di say, a 'div' o a' td'. –

img { display:block; }

img { vertical-align:bottom; }

avrebbe funzionato. Poiché le immagini sono in linea e il testo è in linea, i programmi utente lasciano uno spazio per i caratteri della discendenza (y, q, g). Per annullare questo effetto per le immagini, puoi specificare uno degli stili sopra, anche se potresti voler rendere le regole più specifiche in modo da non indirizzare l'immagine a cui non vuoi che sia applicato.

Demo: http://jsbin.com/obuxu

Un'altra alternativa come un altro poster ha sottolineato sarebbe quello di impostare line-height a 0 sul elemento padre.

spiegazione tecnica: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

fonte

2009-10-05 07:10:40

Se il tuo problema è in IE, questa risposta sembra la più logica. – Sam152

Questo * non * è specifico per IE, è il comportamento naturale di molti moderni motori di rendering incluso il tuo amato Gecko. –

'del tutto possibile che ciò che si pensa è padding inferiore sul div è in realtà causato da un altro regola di stile - per esempio, imbottitura sull'elemento body, che è possibile se si abilita/navigatore disattivare la modalità (giocando con il DOCTYPE QUIRKS tende ad avere quell'effetto).

In tal caso, dovrebbe essere possibile sovrascrivere lo stile predefinito con una regola di stile personalizzata.

Firebug può essere di grande aiuto in quanto mostra quali stili CSS influenzano quale elemento DOM.

fonte

2009-10-05 07:08:35 levik

Impostare la line-height: 0; nello stile div:

L'img è un elemento in linea, quindi salva spazio per i personaggi con discendenti. La regolazione dell'altezza della linea nel div elimina il problema. Facoltativamente, puoi anche modificare l'img da visualizzare come elemento di blocco.

fonte

2009-10-05 07:13:15 Abinadi

indesiderati padding-bottom di un div

risposta

Problemi correlati