HTML/CSS - 清除Div对齐？

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;
}

- Kombo

Answer 1

请添加以下内容：

.picture img{
     display:block;
}

这是已知的一个内联图片问题。请参见这里。

- amosrivera

---

Bug？更像是特性。 - You

Answer 2

或者，您可以尝试不同的图像垂直对齐值。我记得有一次我成功地将内联图像垂直移动到底部。

- Bardt