株式会社オートプロジェクト

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

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

imgタグで画像を設定する際、画像の下に余白ができる場合があります。

今回は、その余白を消す方法を紹介します。

なぜ余白ができる?

img要素に対して余白ができる原因は、画像を含むインライン要素にvertical-align: baseline;の初期値が効いているからです。

解決方法

解決方法は、

  1. img要素に対して、vertical-align: bottom;など、vertical-alignにbaseline以外の指定する。
  2. img要素に対して、display:flex;または、display:block;を指定する。

上記で余白は消えます。ぜひ、試してみてください。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

バックエンドについて、オートプロジェクトに問い合わせをする

Contact ご相談・お問い合わせ

実現の可否や概算費用、納期に関するご質問・ご相談も、
どうぞご遠慮なくお問い合わせください。

お問い合わせ ご相談・お問い合わせ
TOP