HTML

HTML 画像の下の余白を削除する方法

HTML で画像の下の余白を削除する方法を紹介します。
例えば、ピクセル単位で見た目を調整した時に便利な方法です。

画像要素の下に余白ができる理由

HTML の画像(img要素)はインライン要素なのでベースラインを基準に表示されます。
そのため、特に指定がない場合はベースラインを基準に表示されることで画像の下に余白が生まれます。

解決方法その1:display:block を使う

インライン要素だから画像の下に余白ができるので、画像要素をブロック要素に変更して対応します。
次のコードは、img 要素をブロック要素にする方法です。

img {
display: block;
}

この方法の注意点としては、インライン要素だから効いていた一部の CSS セレクターが効かなくなります。
例えば、画像をセンター表示するために text-align: center; を使用していたら注意しましょう。
この場合の代替案は、CSS セレクター margin: 0 auto; でセンター揃えを試してみましょう。これでうまくいかない場合は追加で width を指定してみてください。

解決方法その2:vertical-align を bottom にする

画像のインライン要素を整えるという意味では、css セレクター vertical-align を使用する方法もあります。
img タグの親要素に対して vertical-align: bottom; を使用します。
bottom 指定は、ベースラインに合わせて下端揃えをするので、下の余白を埋めて位置を調整することができます。

まとめ

HTML で画像の下の余白を削除する方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事