ホワイトスペースのdivにIMGを使用した場合

Question

私の現在のCSSが

.container { 
display: block; 
width: 400px; 
height: auto; 
padding: 0px 0px; 
background-color: #ffffff; 
border: black 1px solid; 
} 
.container img { 
width: 100%; 
} 

ており、HTMLはここ

<div class="container"> 
<img src="http://67.media.tumblr.com/15b26a66682a68facad249bd442ced38/tumblr_nw48hrdLfp1sikueao2_1280.jpg"> 
</div> 

である私は白を取り除くか、どのように結果であり、画像の下のスペース？ img要素のための

Answer 1

を追加することによって、これを修正することができます表示ブロックを画像に適用する

div img { 
    display: block; 
} 

Answer 2

デフォルトの表示はinlineで、画像の下の空白はJ、Y、Gなどの文字のディセンダのためのスペースであることを...あなたはハローvertical-align: top

.container { 
 
    display: block; 
 
    width: 400px; 
 
    height: auto; 
 
    padding: 0px 0px; 
 
    background-color: #ffffff; 
 
    border: black 1px solid; 
 
} 
 
.container img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>