Images in div have small gap - how to remove?

With images over 100px high it's fine but at 70px high there is a gap. Why?

[Beau]

I have a container class for holding product thumb nails. All the product thumbs are the same width but different heights. The code works fine for those that are as high as they are wide but when they are 110px H by 70px W I am getting a space at the bottom of the image. Anyone got any ideas what's wrong with my code or how to fix this?

I've checked the picture sizes and their definition match and the pics don't have the white space on them ;-)

CSS:
.pictures { /*this defines how the product pitures will be displayed*/
float: left;
margin: 0px 0px 0px 0px;
border: 1px solid #002469;
padding: 0px;
background: #FFFFFF;
}

HTML:
<div class="pictures">
<a href="image.htm" class="img" onClick="popitup(this.href,'console',360,680);return false;"target="_blank"><img src="image_thumb.jpg" name="image_thumb" width="110" height="110" border="0" alt="Click for more details"></a>
</div>

TIA
Beau

[Beau]

Oops - just noticed my appalling spelling mistake in the CSS notation - should read "pictures" not "pitures"!

[Beau]

Anyone got any ideas on this?

I have searched the archives (and googled) without finding anything that appears relevant but if this is an obvious mistake that has been covered before please point me in the right direction for the solution.

TIA

Beau

[dan121]

add
img{display:block;}

[Noisehag]

Removing the hard return before the closing div did it for me.

<div class="pictures">
<a href="image.htm" class="img" onClick="popitup(this.href,'console',360,680);return false;"target="_blank"><img src="image_thumb.jpg" name="image_thumb" width="110" height="110" border="0" alt="Click for more details"></a></div>

[Beau]

Thanks guys - noisehag - that sorts it perfect - and I've learnt something new too!

Many thanks

Beau