CSSで組んだ際、画像の下に隙間ができたりすることってありませんか？画像を配置している要素の背景色がページの背景色と同じだとあまり気づかないかもしれませんが、背景色が違ったり画像の下にぴったりくっついた要素を配置しようとしたりすると一目瞭然です。何か原因があるのか探ってみてもおかしい所は見当たらない。それは当然です。これはCSSの仕様通りの表示だからです。
CSSの仕様では、vertical-alignプロパティの初期値は「baseline」になっています。つまり縦の位置をベースラインに合わせるということです。アルファベットの「g」「j」など下にはみ出す部分が隙間となってでてきます。
ということで、imgに対してvertical-alignプロパティを「bottom」にすることで解消できます。一応書いとくと、
CSS
[css]
img{
vertical-align: bottom;
}
[/css]
となります。
また違った方法ですと、
CSS
[css]
img{
display: block;
}
[/css]
こちらの方法でも下の隙間をなくすことができます。