HTML/CSS - Flave Div Alignment？

Question

イメージのdivがあるデザインを作成しようとしていますが、その下の前/次のボタンがimage/divと同じになります。私は2つの間に常に少しのスペースがあるので、いくつかの問題を抱えています。

赤

は、私は、私はちょうどそれがから来るのどこ見つけることができないよう排除しようとしているものです。それは、なぜ私がこの空間が作り出され/スカッシュされているのかを知るために、背景色を乾燥させることによって私は赤色になっています。ここで

は私の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; 
} 

これは、インライン画像が引き起こす既知のバグです。 hereを参照してください。

Answer 2

また、画像の垂直方向の値を変更してみることもできます。私が覚えているように、私はインラインイメージを底に垂直に動かす良い結果を得ました。