Странное поведение HTML/CSS

Question

Ну, я создал jsfiddle фрагмент кода, как следовать

link to jsfillde

здесь код

HTML

<div id="container"> 
    <div class="media"> 
     <img src="http://i.minus.com/i3qPeX4FjQRFt.jpg"/> 
    </div> 
</div> 

CSS

#container { 
    position:relative; 
    width:400px; 
    height:320px; 
    background-color:#efefef; 
} 

.media { 
    wight:100%; 
    padding:2px; 
    background-color:#a0a0a0; 
    position:absolute; 
    bottom:0; 
} 

.media > img { 
    width:100%; 
    height:auto; 
} 

Целью этого является показать изображение внизу # контейнера. Но, как вы видите, у медиа-класса есть дополнительный «4px» на дне, и я понятия не имею, почему. Это полностью разрушает представление. Пожалуйста, помогите.

Answer 1

Добавить vertical-align:bottom в CSS вашего изображения:

.media > img { 
    width:100%; 
    height:auto; 
    vertical-align:bottom; 
} 

jsFiddle example