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

這是內聯圖像導致的已知錯誤。 看到這里 。

Answer 2

或者，您可以嘗試不同的垂直對齊圖像值。 我記得，我得到了一個好的結果，將內嵌圖像垂直移動到底部。