スタイルシートを利用してデザインしていると、画像の下の方に妙な隙間ができることがある。
imgタグのmarginやpaddingを0にしても隙間が消えず、「なんじゃこりゃ」と思って色々探していると、どうやら「vertical-align」というものが悪さをしているようだ。いや、悪意はないんだろうけど。

この「vertical-align」というのは、行内における垂直方向に位置なんだそうだ。

たとえば「g」や「y」など、足が出るアルファベットが、ベースラインから足を突き出して表示するか、足までベースライン上に出すかを指定するものだ。

しかし、今回は画像のみで文字列は入力していないのだが、他に方法もないので、imgタグのスタイルに「vertical-align」を「bottom」にしてみた。

すると、隙間が消えた。
理由は不明だ。