Bosselmann: Boxmodell

Hallo,

ich habe ein kleines Verständnisproblem des Boxmodells in folgender Situation:

Ich habe ein Bild in einem div. Der Div ist aber nun merkwürdigerweise immer 4px höher als die tatsächliche Größe des Bilds. Im Div befinden sich keine weiteren Inhalte, padding, margin und border sind nicht bzw. auf 0px gesetzt.
Doctype ist der HTML5-Doctype <!DOCTYPE html>, im Quirksmode tritt das Phänomen nicht auf.

<div id="dbaddarticleimage0containerdiv"><img id="dbaddarticleimage0img" class="dbaddarticleimages" src="http://graphics.localhost/original/rote libelle.jpg" style="width: 619px; height: 464px; opacity: 1; left: 0px; top: 0px; "></div>
.preview img { position:relative; }

Wieso ist der Div nun größer als das Bild?

Danke für die Hilfe

Grüße

Dominique

  1. Hallo,

    Wieso ist der Div nun größer als das Bild?

    Weil Bilder Inlineelemente sind, die auf einer Zeile positioniert werden und daher Platz für die Unterlänge der Buchstaben reserviert wird.

    vertical-align: bottom; oder display: block; helfen dir weiter.

    Gruß, Tom

    1. Hallo,

      Danke vielmals!

      Grüße Dominique