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

CSS で画像の下の余白を消す方法を紹介します。
例えば、liタグで横並びの見せ方をした時に、画像のせいで一行目と二行目の間に意図しない余白が表示された時に有効な対処方法です。

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

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

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

インライン要素だから画像の下に余白ができるので、画像要素をブロック要素に変更して対応します。
次のコードは、CSS を使って 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 指定はベースラインに合わせて下端揃えを実行するので、下の余白を埋めて位置を調整することができます。

まとめ

CSS で画像の下の余白を消す方法を紹介しました。