2 extra pixels padding at bottom of image

HTML & CSS
1

I have the following HTML/CSS. It should be a simple framed photo with equal space all round the image - BUT there are 2 more pixels at the bottom than the top and sides. Can anyone explain where the extra 2 pixels come from, please? I’ve tried the inspect element option in Opera/Chrome but cannot find where they come from.

.photo-right {
    float: right;
    padding: 12px;
    margin-left: 12px;
    margin-bottom: 12px;
    border: 1px solid #a6a6a6;
    background: #f1f1f1;
}

<div class="photo-right"><img src="images/photo1.jpg" alt="" width="180" height="240" /></div>

I attach an example as I don’t have the website online yet.

2

Is it possible to link us to an actual demo of the code in working?

3

I have uploaded a test page to http://gandalf458.co.uk/xtest.php

4

Thats because IMGs are inline elements, as such they receive ‘leading’ by default; the same way a word has some ‘extra’ space at top or bottom. Adding vertical-align:top; to the IMG should take care of that.

.photo-right  img {vertical-align:top; }

hope that helps

5

Ah - thanks!