Merkwürdiger Innenabstand im Image-Container

[LousyWeather]

Hallo zusammen,

vielleicht sehe ich den Wald vor Bäumen nicht, aber ich zerbeche mir seit Tagen den Kopf und komme nicht weiter. Hat jemand von Euch eine Idee, woran das hier liegen kann?

Ich habe auf einer Seite verschiedene Bilder untereinander eingebaut. Alle sollen einen einheitlichen grauen Rahmen haben. Deshalb habe ich die CSS-Formatdefinition "ornament" geschaffen:

.ornament
{
border: 5px solid #d4d4d4;
}

Bei allen Bildern, denen ich diese Klasse zugewiesen habe, zeigt sich allerdings am unteren Rand ein Abstand zwischen Bild und Rahmen (siehe Screenshot). Woher der kommt, kann ich beim besten Willen nicht herausfinden.

Hier ist noch der Quelltext:

<div class="ce_image ornament block" style="margin-top:18px;">

<div class="image_container">
<img src="tl_files/jan-images/vita01.jpg" width="333" height="510" alt="Foto: Jan Langmaack" />
</div>

</div>

Für die Klassen "ce_image" und "image_container" ist nur Folgendes festgelegt:

.ce_image,
.image_container
{
padding:0;
}

Hier der Screenshot:



Hat jemand von euch eine Idee?

Vielen Dank und viele Grüße von der Küste!

[dirksche]

Hallöchen,

versuch doch mal das hier:

img 
{ 
display: block; 
vertical-align: bottom;
}

Gruß,
Dirk

[LousyWeather]

Ha! Das funktioniert! Vielen Dank!!

[He........]

Moin,

hier noch einen Erklärungslink dazu.

[LousyWeather]

Danke, das ist verständlich erklärt. Hat mir geholfen!

Viele Grüße aus dem Norden!