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.