CSSでコーディングしているときに画像の下に謎の隙間ができることがあります。今回はその原因と対象方法について書きたいと思います。実際、以下のようになります。

ソースは以下です。

<div>
<img src="/sample/image/sample.gif" alt="sample" />abcdefg
</div>

div{
  background:#F00;
  width:200px;
}

この現象の原因はCSSのプロパティでインライン要素の垂直位置を指定する、vertical-alignにあります。このvertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているからです。vertical-alignの値の意味は下記サイトに載っていました。

vertical-align－スタイルシートリファレンス

つまりgとかjとか下にはみ出るアルファベットのはみ出た長さの分だけ隙間ができるわけです。なので対処ほうとしてはvertical-alignにbottomやtext-bottomを指定すれば解消されます。

<div>
<img src="/sample/image/sample.gif" alt="sample" />abcdefg
</div>

div{
  background:#F00;
  width:200px;
}
img{
  vertical-align:bottom;
}

注意点としてはvertical-alignはインライン要素の垂直方向を指定するプロパティなので、divではなくimgのほうに指定するということです。