画像の下にどうしても隙間が残る場合はタグにvertical-align:bottomが正解【Webデザイン・CSS】

1年以上前の記事です。内容が古い可能性があります。

これは知らなかった。。というか、ここまで意識してなかった。。

しかも、通常、インライン要素には指定すべきではないmarginやpadding等も反映されてしまい、果てにはfloatまでしっかり使えたりします。
個人的には<img>タグはインライン要素であるということで、<img>タグに直接float等は指定せず、
親要素のブロックレベル要素（<div>等）にfloatを指定するように心がけています。

そもそも、文法上（HTML4.01Strictの場合）、<img>タグはブロックレベル要素に囲まれなければならないわけです。
ところがブロックレベル要素に囲まれた<img>タグは初期設定では下側に隙間ができてしまい、
marginプロパティやpaddingプロパティではどうしても消えないのご存知でしたでしょうか？

わかりやすく親要素のbackgroundに色を入れてみました。
IEとChromeで確認していますがどちらもちょっとだけ下に隙間ができているのがわかると思います。

IE（インターネットエクスプローラー）バージョンは11。
※ 一番上が<p>タグに文章と一緒に配置した<img>タグ。
※ 真ん中が<p>タグに<img>タグだけ配置したもの。
※ 一番下が<div>タグに<img>タグだけ配置したもの。

画像の下にちょっと隙間ができている。

同様にGoogle Chrome（最新バージョン35.0.1916.153m）

IEほどは目立たないがやはり隙間ができている。

実はこれはmarginやpaddingではなく同じCSSのvertical-align（バーティカルアライン）プロパティで修正することができます。
vertical-alignプロパティはテキストと画像が並んで表示される場合、その基準にするラインを決めるプロパティで、初期設定では値はbaselineになってます。

baselineというのは英字の小文字「a」や「b」などの一番下になります。
図で書くとこんな感じ。（赤いラインがベースライン）


つまり、「g」は「j」などはベースラインよりも下に文字がはみ出しているということになります。
これがイメージの下の隙間の原因だったわけです。

ということで、この隙間を修正するには<img>に対して「varticalalign:bottom」と指定してあげればいいということになります。
値をbottomにすることでテキストの一番下（つまり上図gの一番下）と画像の一番下が揃うようになるからです。

以上を施した修正後の表示は以下のとおりです。

IE（インターネットエクスプローラー11）

下の隙間がなくなってます。

同様にGoogle Chrome Ver35.0.1916.153m

こちらも同様バッチリです。

というわけで、<img>タグ下の意味不明な隙間はCSSに

と書くことで修正可能です。
これ、リセットCSSにも書いておいた方がいいですよねぇ。

さっそく書き加えることにしました。
□ 最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】 – ちほちゅう