img in floatendem div erzeugt unregelmäßiges padding

1 Rudy

Hallo,

ich möchte für die Bilder einer neuen Website ein schickes Passepartout haben, welches ich mittels eines umgebenden divs mit einem Padding zu realisieren versuche. Leider wird der Rahmen unten dicker, und ich habe keinen Plan, warum. Ich habe auch bereits versucht, das padding des divs mit einem margin des imgs zu ersetzen - selbes Ergebnis (Fx, Opera, Konqueror - überall dasselbe). Mit einem geschachtelten div passiert das nicht, nur beim img. Da sind genau 2 Pixel zuviel... ich dachte zuerst, vielleicht ein Bug oder es liegt am Rahmen des IMG, tuts aber nicht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Bilderrahmen</title>
</head>
<style type="text/css">
  * { margin:0; padding:0; }
  p { padding-bottom:1em; text-align:justify; }
  body { text-align:center; font:normal 12px Arial, Helvetica, sans-serif; }
  div#all {  border:1px solid #ccc; padding:1em; margin:20px auto; text-align:left; width:720px; }
  div#all-footer { clear:both; }
  div.passepartout { border:1px solid #ccc; background:white; padding:5px; float:right; margin: 0 0 1em 1em; }
  div.passepartout div { width:100px; height:46px; background:#C0BAD9; border:1px solid #ccc; }
  div.passepartout img { border:1px solid #ccc; }
</style>
<body>
  <div id="all">  
    <div class="passepartout">
       <img src="http://forum.joergkrusesweb.de/images/joergs-forum.gif" width="100" height="46" />
    </div>
    <div class="passepartout">
       <div></div>
    </div>
    <p>
      Lorem ipsum est at nulla feugiat, per odio splendide ut. Te eum tale adhuc scripta, sapientem cotidieque vel in. 
      Eum et possim recteque suscipiantur, has no nostro audiam detracto, at vix sumo veritus. Quo nullam causae ex,
      impetus eleifend suavitate vel ei. Erat semper ius at, mea ex doming erroribus. Vel persius petentium facilisis ei, 
      quas iudico noster eos et.
    </p>
    <p>
      Nulla aeque id usu. Minim consectetuer qui id. Vel facilis tractatos ei. Qui at kasd inermis facilis, sea et summo
      torquatos consetetur, has unum mazim mediocrem eu. Ex eligendi qualisque per, et vidit facilisi vulputate pro.    
    </p>
    <div id="all-footer"></div>
  </div>
</body>
</html>

Woran liegt das? Muss ich das zwingend so korrigieren, indem ich ein falsches padding-bottom einstelle? Danke für Tips!

2 Jörg Kruse

Wenn das Bild als Blockelement behandelt wird, verschwindet der zusätzliche Abstand:

div.passepartout img { border:1px solid #ccc; display:block; }

Möglicherweise wird bei Inline-Elemnten die border anders verrechnet?

3 Rudy

Ah, danke - damit fühl ich mich wohler als mit einem falschen padding-bottom. Ich vergess immer wieder, dass img inline sind, obwohl ich das weiß...

img in floatendem div erzeugt unregelmäßiges padding

Beitrag schreiben (als Gast)