imgタグの画像の下にわずかな隙間（余白）が・・・なぜ！？
カテゴリー：
スマホを機種変更をした翌週に、機種変更の割引キャンペーン（要機種変更前のエントリー）のはがきをよこす携帯会社にちょっとイラっとしているぽけっと都城スタッフ ヒラです。
ホームページを制作していると、自分の想定した表示にならないな～ってことがたまにあります。
その度に調べるんですけど、いつでも確認できるように自分のブログにメモとして残しておきたいと思います。
症状
ホームページに画像を配置するには通常、imgタグを使用しますが、imgタグにmarginを0に指定しているのに、隙間ができてしまうことがあります。
実例として、色付のボックスに画像を配置してみます。
sample image原因
ブラウザやDOCTYPE宣言の違いによっても異なりますが、画像の下にわずかな隙間ができるのは、画像をテキストのベースラインに揃えて表示されるからです。画像はインライン要素なので特に指定をしなかった場合、配置されるのはベースラインになります。
vertical-alignの詳細についてはこちら
対策１ 画像をブロック要素に
display:blockで画像自体をブロック化すます。
この場合、中央寄せはtext-align: center;ではなくmargin: auto;を指定しましょう。
対策２ 縦方向の指定を下端揃えに
画像にvertical-align: bottom;を指定しましょう。
対策３ こんなやり方も
少し無理やりかもしれませんが、画像の親要素にline-height: 0;を指定するやり方もあります。