Откуда это белое пространство?

Question

У меня проблемы с моим sidebar_box, так как он отображает нежелательное пустое пространство внизу моих изображений.

Дело в том, что это, кажется, происходит только тогда, когда я поместить изображение внутри (это не происходит с текстом или ул списков)

Вы можете увидеть это jsFiddle

Мой HTML структуру:

<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/