クイックフィックス：
画像の下の隙間をなくすには、次の方法があります。
- 画像の垂直配置プロパティを
vertical-align: bottom; vertical-align: top;またはに設定しますvertical-align: middle;
- 画像の表示プロパティを
display:block;
ライブデモについては、次のコードを参照してください。
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
説明：なぜ画像の下にギャップがあるのですか？
画像の下の隙間や余分なスペースはバグや問題ではなく、デフォルトの動作です。根本的な原因は、画像が置換された要素であることです（MDN置換された要素を参照）。これにより、「イメージのように動作」し、独自の固有の寸法、アスペクト比を
持つことinlineができます。ブラウザは表示プロパティを計算しますが、ブラウザに近づける特別な動作を提供しますinline-block要素にます（垂直方向に整列できるため、それらの高さ、上部/下部のマージンとパディング、変換...）。
これは、次のことも意味します。
<img>にはベースラインがないため、画像がvertical-align：ベースラインのインラインフォーマットコンテキストで使用されると、画像の下部がテキストベースラインに配置されます。
（出典：MDN、強調鉱山）
ブラウザはデフォルトでvertical-alignプロパティをベースラインに計算するため、これがデフォルトの動作です。次の画像は、ベースラインがテキストのどこにあるかを示しています。
（画像ソース）
上の画像でわかるように、ベースラインに揃えられた要素は、ベースラインの下に伸びるディセンダー（のようにj, p, g ...）のためのスペースを保つ必要があります。この構成では、次の例でわかるように、画像の下部がベースラインに揃っています。
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
これが<img>、次のデモのように、タグのデフォルトの動作がコンテナの下部にギャップを作成し、vertical-alignプロパティまたはdisplayプロパティを変更するとタグが削除される理由です。
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
