画像の下に隙間ができる

CSSで組んだ際、画像の下に隙間ができたりすることってありませんか?画像を配置している要素の背景色がページの背景色と同じだとあまり気づかないかもしれませんが、背景色が違ったり画像の下にぴったりくっついた要素を配置しようとしたりすると一目瞭然です。何か原因があるのか探ってみてもおかしい所は見当たらない。それは当然です。これはCSSの仕様通りの表示だからです。


CSSの仕様では、vertical-alignプロパティの初期値は「baseline」になっています。つまり縦の位置をベースラインに合わせるということです。アルファベットの「g」「j」など下にはみ出す部分が隙間となってでてきます。
ということで、imgに対してvertical-alignプロパティを「bottom」にすることで解消できます。一応書いとくと、

CSS

img{
vertical-align: bottom;
}

となります。
また違った方法ですと、

CSS


img{
display: block;
}

こちらの方法でも下の隙間をなくすことができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください