imgタグのスタイルで、marginとpaddingを0pxに設定しているのに、 imgの下に謎の隙間ができて困ったことは無いですか？
<style>
img {
margin: 0px;
padding: 0px;
}
</style>
<img src="img01.png"><img src="img02.png">
<img src="img02.png"><img src="img01.png">
（解りやすいように、背景色を青にしています。）
まずは、この隙間の正体について解説しますね。
解りやすいように文字と画像を１行に並べてみました。
画像の一番下(青のライン)と、文字の一番下(赤のライン)の位置に着目してください。同じ行にあるはずなのに、 画像の下端は文字の下端よりも若干上に表示されています。
じつは、この赤のラインと、青のラインの差が、謎の隙間の正体になります。
文字は、baselineを基準として描画されます。baselineの初期値は、ideographic baselineの位置になります。 imgタグもこのbaselineの位置を基準に描画されます。
そして、文字の高さは、em squareの高さ(top of em square ～ bottom of em square)で扱われる為、 次の行の先頭は、bottom of em square直下になります。 (図の中の'f'などのem square内に収まらない文字は、はみ出して描画されます)
このideographic baselineの位置と、文字の高さの基準となるbottom of em squareの位置の差が謎の隙間となって現れています。
では、この隙間を無くすにはどうすればいいか？
そうです。文字の下端と、画像の下端が同じ位置に描画されるように調整すればいいのです。
画像描画の垂直位置をどのラインを基準に描画するかを調整するには、CSSのvartial-align属性で行います。
| vertical-alignの値 | 基準となる位置 |
|---|---|
| top | top of em square |
| text-top | handing baseline |
| middle | middle |
| alphabetic | alphabetic baseline |
| text-bottom | ideographic baseline |
| bottom | bottom of em square |
画像描画の基準位置をテキストの高さの下端の基準点bottom of em squareに合わせてみます。 vertical-alignをbottomに設定します。
<style>
img {
margin: 0px;
padding: 0px;
vertical-align: bottom;
}
</style>
謎の隙間が無くなりました。 やったね!!。 
それでは、imgの下にできてしまう謎の隙間を除去する方法について勉強するね!!。