画像の下にある余白をCSSで消す方法|margin・paddingなしでも余白がでる場合

HTMLのimgタグで画像を挿入した際に、margin・paddingをなしにしても画像下に余白ができる場合があるかもしれません。

今回は、その画像下の余白をCSSで消す方法となります。

画像の下にある余白をCSSで消す方法

imgタグで画像を挿入し、その画像をインライン要素とする場合、縦方向の揃え位置を指定できるvertical-alignプロパティのデフォルト値baselineが有効となります。

vertical-alignプロパティのbaselineは、要素の位置を親要素のベースラインに揃えますが、画像はベースラインを持たないため、画像の下端が親要素のベースラインに揃います。

そのため、画像の親要素によっては、画像の下に余白ができる場合があります。

そのような場合、画像の要素に対して、以下のようにvertical-align: bottom;を指定します。

img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

vertical-align: bottom;では、画像の下部を行ボックスの下部に揃えます。それにより画像下部にできる余白がなくなります。

vertical-alignプロパティの値についての詳細は、以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。