HTML/CSS - Flush Div Alignment？

Question

我正在尝试创建一个设计,其中我有一个图像的div,然后下面的上一个/下一个按钮与图像/ div齐平.我遇到了一些问题,因为两者之间总有一些空间.

红色是我想要消除的,我似乎无法找到它的来源.它目前是红色的,因为我指定了干燥的背景颜色,以找出为什么创建这个空间/压缩它.

这是我的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>

这是我的CSS,我想问题就在这里,但我似乎无法找到它...感谢您的帮助,我一直在用这种方式挣扎太久.

/* 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

添加以下内容：

.picture img{
     display:block;
}

这是内联图像导致的已知错误。看这里。