I'm not sure how to get rid of some unwanted padding at the bottom of an img that is inside a div that has a border.

I'm on a mac and the padding appears in both safari and firefox, so I'm assuming its not a browser bug.

html:
<div id="credit_output">
<div>
<div id="img">
<img src="image.jpg" alt="image"/>
</div>
<div id="info">2<br/>
2<br/>
</div>
</div>
<div id="links">
<a href="edit.html">edit</a>
<a href="remove.html">remove</a>
</div>
</div>

css:
#credit_output {
padding: 5px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #CCCCCC;
position: relative;
}
#credit_output #img {
border: thin solid #000000;
float: left;
}
#credit_output #info {
float: left;
padding-left: 5px;
}
#credit_output #links {
clear: both;
background-color: #CCCCCC;
padding: 2px;
}
#credit_output #links a {
padding-right: 15px;
padding-left: 5px;
background-color: #CCCCCC;
}

Try adding this to the CSS.

 #credit_output  #img img {
padding:0;
margin:0;
}

And, put the proper width and height dimensions on the image in your HTML.

It's also not a good practice to use IDs like 'img' when the tag is 'img'.