I have a box with a dashed border.
Inside that I have a box with a solid border that I am inserting a picture.
The box is the right size, however when I insert a image it seems to add about 2px of padding below the image so that the solid line across the bottom is about 2px below the image.
[COLOR=Blue]<div id=“picture_links_pic_holder”>
<img src=“w1.jpg” height=“140” width=“118” />
</div>[/COLOR]
[COLOR=Magenta]#picture_links_pic_holder {
padding: 0px 0px 0px 0px;
border: 1px solid #FF9900;
margin-top: 4px;
margin-left: 1px;
width:120px;
height:140px;
}[/COLOR]
If I remove the image the box returns to the right height.
If I remove the image size tags same problem.
If I reduce the image height=“130” the box returns to the right height with the image about 10px to short.
But when I as I increase hight back up to about “137” the gap starts to return.
Its as if the CSS has added 2px to the bottom of the image so it is imposible for the bottom border to be inline with the picture.
If I use the image as a background no problems (though not practical)
[COLOR=Magenta]background-image: url(w1.jpg);[/COLOR]
ANY ideas please ?
