這個空白是從哪裏來的？

Question

我與我的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; 
} 

我很笨，我已經嘗試了我所知道的一切。

Answer 1

將vertical-align: bottom添加到您的圖片。發生這種情況是因爲圖像以內聯方式顯示，這意味着在q,p或其他低於基線的字母的情況下，它們必須留下空間。

Answer 2

這樣寫：

img{ 
    border:0; 
    vertical-align:top; 
} 

入住這http://jsfiddle.net/sKE6y/1/