はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

HTMLにimg要素を記述し、いざCSSで表示の調整を行おうとすると、画像の下に謎の余白ができて困ったことはありませんか。

デベロッパーツールで確認してみると、paddingでもmarginでもなくどうしたらいいかわからない……という方に、このimg要素の画像のしたにできる余白がなに者なのかと、その消し方について解説していきます。

謎の余白の正体

img要素の特徴・性質

img要素のdisplayプロパティの初期値には「inline」が設定されており、それにともなってvertical-alignプロパティの値が「baseline」となっています。

しかし、img要素の画像には、テキストと異なって「baseline」というものは存在しません。そのため、画像の下端がテキストでいうところの「baseline」として認識されます。

vertical-alignプロパティにより画像の下端が「baseline」にそろえられると、テキストの「gjpqy」などのベースラインの下にはみ出す部分が、img要素の画像ではなにも存在しない謎の余白として生じてしまいます。これによって、このベースラインの下の空間分だけ画像が浮いたような状態となります。

解決方法

謎の余白の正体と原因がわかったところで、解決策はとても簡単です。vertical-alignの値が「baseline」であることによって余白が生じてしまうため、これをほかの値に設定するだけあっという間に解決することができます。

困ったときにはvertical-alignに「bottom」や「top」に設定してみてください。

または、vertical-alignの値はinlineやinline-blockの要素に対して有効であるため、「display: block;」を設定することでも解決することができます。

おわりに

img要素の画像のしたにできる余白を消すことができずに困っている方、勉強中の方の参考になれば幸いです。

【実践マーケティング手法２２選】 無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。