David Kendall

Have you ever had a div where the last thing in there (or even the only thing) is an image? If so you will most likely have found that most browsers puts 3px or so extra space beneath your image.

Here’s what I mean

Thisis a div which consists of a background image for the blue background, a paragraph for the text and an image of a heart to finish. Ideally I do not want the extra few pixels at the bottom showing my backgroudn through.

<div class=’testimonial’>
<p>“Thank you so much for your help. I met Bob through the site after less than a month, and we are still together and happy all these months on. Thanks Motorway dating ”
<br /><br />
<strong>Katie x</strong>
</p>
<img alt=’Motorway dating testimonial’ src=’images/testimonial_bottom.gif’ width=’178′ height=’76′ />
</div>

You would think that adding margin: 0px; padding: 0px will sort the problem but nope, nadda.

I tried googling but couldn`t find anything on the subject apart from suggestions of zero margins and paddings despite many people coming across this very annoying problem.

So I put the good old thinking cap on and remembered this nifty little piece of css

vertical-align: text-bottom;

Hurray! Place this onto your image css

.testimonial img {vertical-align: text-bottom;}

and voila, no extra space beneath your image. Just to prove it here is what my testimonial looks like now

Hope this helps.