Bild mit Rahmen

Hallo alle zusammen,

laufe irgendwie im Moment nicht rund mit HTML und CSS. Die ganz einfachen Basis-Sachen laufen nicht mehr und ich verstehe nicht warum. Ich wollte ein Bild ganz einfach mit einem Rahmen der 3px von den Bildrändern entfernt ist und habe Folgendes:

HTML:
<div class="rahmen"><img src="test.jpg" alt="not working" width="100%"></div>

CSS:
.rahmen{

width: 12%;
border-style:solid;
border-width:1px;
border-color:#dddddd;
padding:3px;
}

Es funktioniert zwar, allerdings ist der Abstand vom unteren Bildrand zum Rahmen deutlich mehr als 3px. Zumindest stellen das alle meine Browser (Firefox, Safari und Chrome) so dar. Habs sinnloserweise auch schon mit margin:0; und float, etc. versucht. Aber siehe Bild im Anhang.

Ich verstehe es nicht. Könnte das Padding künstlich auf 3px 3px 0 3px; setzen, aber warum? Danke im Vorab für Eure Hilfe.

P.S. Abstand nach unten ist sogar 6px.

Hallo sunlite,
Hab Deinen Code hier ausprobiert:
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2
und er funktioniert tatsächlich auch dort so, wie bei Dir.

Wenn Du aber die border-styles auf das img-tag beziehst, dann funktioniert es:

<div><img class="rahmen" src="test.jpg" alt="not working"></div>

.rahmen{

width: 12%;
height: auto;
border-style:solid;
border-width:1px;
border-color:#dddddd; 
padding:3px;
}

Width für das Bild musst Du dann nicht direkt setzen, im CSS ist das height:auto notwendig.

LG Ejoo

Hi Ejoo,

vielen Dank für die Antwort 😉