画像を囲むボーダーの余計な空白

写真の下になぜかこんな空白が空いたらどうしますか？

解決方法はこれです。 vertical-align:bottom;をimgタグに指定します。

ブロック要素の中で画像を表示して、そのブロック要素にボーダーを設定すると下側にわずかな隙間ができます。
例えばdivの中にimgで画像表示しdivにボーダー設定した場合などです。
具体的なソースはこんな感じです。
CSSの設定

div{
 border:solid 3px red;
 width:150px;
}

HTMLの設定

<div>
<img src="neko.jpg" width="150" height="112" alt="test">
</div>

原因
これは画像がテキストのベースラインに揃えて表示されるからです。ベースラインとボトムの間のディセンダ分だけ空間が空くのです。

ベースラインとは下図のものです。

画像を囲む余分な空白を無くすサンプルです。

CSSの設定

div{
 border:solid 3px red;
 width:150px;
 height:112px;
}
img{
 vertical-align:bottom;
}

htmlの設定

<div>
<img src="neko.jpg" width="150" height="112" alt="cat">
</div>

vertical-align:bottomを使用すれば解決します。