2012-02-04 14 views
0

sidebar_boxに問題があります。画像の下部に不要な空白が表示されています。この空白はどこから来たのですか?

事は、これは私はあなたがこのjsFiddle

私のHTMLの構造を見ることができます

(これはテキストまたはULリストでは発生しません)内の画像を配置する場合にのみ起こるようですということです。

<div id="sidebar"> 
    <div class="sidebar_box"> 
     <div class="sidebar_header">Advertisement</div> 
     <img src="./images/square_add.png" width="180" height="150" /> 
    </div> 
</div> 

再現する関連CSS:

*{ 
    padding:0; 
    margin:0; 
} 

img{ 
    border:0; 
} 

#sidebar .sidebar_box{ 
    width:180px; 
    background:#fff; 
    border:1px solid #000; 
} 

#sidebar .sidebar_header{ 
    width:180px; 
    background:#ddd; 
    border-bottom:1px solid #000; 
} 

私は無知です、私はすでに私の知識のすべてを試しました。

+0

をチェック!役立つだろう? http://jsfiddle.net/sKE6y/ – FeRtoll

+0

@FeRtollあなたは私のjsFiddleにリンクしました – ajax333221

+0

sry http://jsfiddle.net/sKE6y/6/ – FeRtoll

答えて

3

画像にvertical-align: bottomを追加します。これは、画像がインラインで表示されるためです。つまり、q,pなどの文字がベースラインを下回った場合には、下にスペースを残す必要があります。

+0

私はそれを逃したとは思えません。ありがとう、あなたは私の頭の約100本の毛を救った – ajax333221

関連する問題