HTML/CSS - Flush Div Alignment?

Question

I'm trying to create a design where I have a div for an image, and then a previous/next button below that is flush to the image/div. I'm having some issues as there is a always a bit of space between the two.

The red is what I'm trying to eliminate, I just can't seem to find where it's coming from. It's currently red due to me assigning a background-color to dry to find why this space is created/squash it.

Here's my HTML:

<div class="picture">

        <a href="/galleries/6">
         <img alt="Preview_firefox_wallpaper" src="/uploads/unlocked_image/file/6/preview_Firefox_wallpaper.png?1311526840" />

</a>        
        <div class="pagination"><span class="previous_page disabled">&#8592; Previous</span> <a class="next_page" rel="next" href="/galleries?page=2">Next &#8594;</a></div>        
    </div>

And here's my CSS, I imagine the problem is here, but I can't seem to find it... Thanks for the help, I've been struggling with this way too long.

/* galleries#index */

.time {
  font-size: 16px;
  color: #333333;
}

#image_description {
  clear: both;
}

/* _picture */

div .picture {
  width: 642px;
  margin: auto;  
  background-color: red;
}

.logo {  
  width: 140px;
  float: left;
  height: 38px;  
  color: #FFFFFF;
  background-color: #000000;
  font-size: 28px;
  font-weight: 400;
}

.logo a a:visited{
  color: #FFFFFF;
}

.logo a:visited{
  color: #FFFFFF;
}

.logo a:hover{
  text-decoration: none;
}

/* pagination */

.pagination {
  height: 38px;
  float: right;
}

.next_page {      
  color: #FFFFFF;
  background-color: #3399FF;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
}  

.previous_page {     
  color: #FFFFFF;
  background-color: #FF66CC;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
}

Answer 1

Add the following:

.picture img{
     display:block;
}

This is a known bug that inline images cause. See here.