Unerwünschte padding-bottom eines div

Hier ist mein html:Unerwünschte padding-bottom eines 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>

Ich weiß nicht, warum die div einige padding-bottom enthält auch ich Polsterung eingestellt: 0 gewonnen.

Wenn ich DOCTYPE entferne, wird dieses Problem nicht auftreten. Gibt es andere Möglichkeiten, dieses Problem zu lösen, ohne DOCTYPE zu entfernen?

Quelle

2009-10-05 Alan

Ist dies ein Problem in jedem Browser? – rahul

Interessante Frage. Es brachte mich dazu, über die Linienhöhe und das Boxmodell nachzudenken. +1 – Abinadi

Es ist üblich in verschiedenen Benutzer-Agenten, wenn das Bildelement das einzige Element innerhalb von sagen, ein 'div' oder ein' td' ist. –

img { display:block; }

oder

img { vertical-align:bottom; }

funktionieren würde. Da Bilder inline sind und Text inline ist, lassen Benutzeragenten etwas Platz für Unterlängen (y, q, g). Um diesen Effekt für Bilder aufzuheben, können Sie einen der oben genannten Stile angeben. Es empfiehlt sich jedoch, die Regeln spezifischer zu gestalten, sodass Sie kein Bild auf ein Bild anwenden, auf das dieses nicht angewendet werden soll.

Demo: http://jsbin.com/obuxu

Eine andere Alternative als ein weiterer Poster Zeilenhöhe auf dem Mutterelement auf 0 zu setzen wäre, hat darauf hingewiesen.

Technische Erklärung: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Quelle

2009-10-05 07:10:40

Wenn Ihr Problem in IE ist, scheint diese Antwort am logischsten. – Sam152

Dies ist * nicht * spezifisch für IE, es ist das natürliche Verhalten vieler moderner Rendering-Engines einschließlich Ihres geliebten Gecko. –

Es ist durchaus möglich, dass Sie denken, was auf dem div unteren Polsterung ist durch einen anderen Stil Regel tatsächlich verursacht - zum Beispiel, Polsterung am body Element, das möglich ist, wenn Sie/deaktivieren Browser aktivieren Quirks-Modus (mit dem DOCTYPE spielen neigt dazu, diesen Effekt zu haben).

Wenn dies der Fall ist, sollte es möglich sein, den Standardstyling mit einer benutzerdefinierten Stilregel zu überschreiben.

Firebug kann hier eine große Hilfe sein, da es zeigt, welche CSS-Stile welches DOM-Element beeinflussen.

Quelle

2009-10-05 07:08:35 levik

Stellen Sie die line-height: 0; im div style:

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

Das img ist ein Inline-Element, also spart es Platz für Zeichen mit Unterlängen. Durch Anpassen der Zeilenhöhe im Div wird das Problem behoben. Optional können Sie auch das img als Blockelement anzeigen lassen.

Quelle

2009-10-05 07:13:15 Abinadi

Unerwünschte padding-bottom eines div

Antwort

Verwandte Themen