Дополнительное место в моей фигуре

Question

У меня здесь проблема, я создал фигуру с соотношением 10/1, и это должно быть то же самое пространство, что и мой img (у кого реальный размер 4000 */400 *, таким образом, 10/1), но у меня есть дополнительное пространство, выходящее из ниоткуда.

Знаете ли вы, откуда она взялась?

Вот мой код: http://jsfiddle.net/2drYk/21/

<figure class="container">     
    <img class="content" src="http://img7.imageshack.us/img7/6766/sampes.jpg" alt="sample" /> 
</figure> 

* 
{ 
margin:0; 
padding:0; 
border:0 
} 

.container 
{ 
    width:100%; 
    background:black; 
    overflow:hidden;  
} 
.content 
{ 
    width:100% 
} 


var $cont = $('.container .content'), 
    init_size = $cont.width()*0.1, 
    c =0, 
    s = [400,init_size]; 

$cont.height(init_size); 

$cont.click(function(){ 
    $(this).stop().animate({height: s[c++%2] }); 
}); 

редактировать: мне кажется, что проблема исходит из того, что я называю 2-го класса в моей JQuery, но я до сих пор не знаю, почему, отношение остается прежним.

Answer 1

Изображения отображаются в строках по умолчанию, а пробел остается для дескрипторов символов на строку-высоту.

http://jsfiddle.net/2drYk/22/

.content { 
    display: block; 
}