解 説

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

neko

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

neko

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

HTMLの設定

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

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

baseline

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

CSSの設定

htmlの設定

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