Small margin on bottom of images and photosets?

[Jitaroo]

I'm wondering how to remove the small margin under images that appears outside of the customization preview. The image is wrapped in a div which is given a border, background, and a radius, which is why this is a problem, wouldn't show up otherwise. It doesn't appear to be controlled by padding or margins, applied 0px to both for both the containing div and the image. Any ideas?

Example images below, the image on the left being how it appears in the customization preview, which is how it should be, and on the right how it appears on the actual blog page.

[ana x]

I had the same problem today, putting border and no padding to class/div img part solved it for me. Like:

.avatar img {
        border: 1px solid black;
        padding: 0;
}

but if you already set this up with img then, I don't know. Maybe a part of your code could help.

[Jitaroo]

Ah of course, sorry, should have included my code before.

CSS in use:

    .photopostphotos {border: 1px solid #127273; border-radius: 5px; padding: 0px!important; margin: 0px!important; width: 378px; overflow: hidden; background: #101414;}

    .photopostphotos img {width: 100%; position: relative; filter: alpha(opacity=80); opacity: 0.8; padding: 0px!important; margin: 0px!important;}

And the HTML for it is simply:
<div class="photopostphotos"><img src="{PhotoURL-500}" alt={PhotoAlt}/></div>

[Jitaroo]

So after a bit of messing around with no real progress I gave changing the font-size a shot and for some reason, (Despite the div containing no text at all besides the image.) that appears to have worked. So the solution was simply switching the containing div to have font-size: 0px;.