HTML/CSSにおいて、『画像（img要素）下にできる空白を無くす方法』を紹介します。
- HTML/CSSで画像（img要素）下にできる空白を無くしたい
目次
画像（img要素）下に空白ができるNGな記載方法
以下に私が失敗したNGなパターンを記載します。
NGパターン：タグに何も指定せずそのまま記載
タグに何も指定せずそのままして記載します。
分かりやすいように背景色を付けていますが、画像下に空白ができてしまい、イメージ通りのコーディングができません。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 画像（img要素）下にわずかな空白ができている
画像（img要素）下に空白ができてしまう原因
画像（img要素）下に空白ができてしまう原因はインライン要素の初期値に「vertical-align: baseline;」が指定されているためです。
baselineの上に画像が置かれた状態になり、下に行間分の余白ができてしまいます。
画像（img要素）下にできる空白を無くす方法
では解決方法を紹介します。
OKパターン①：imgタグに「vertical-align:baseline」以外の値を指定
「vertical-align」の初期値が「baseline」のため、「baseline」以外の値（「top」「middle」「bottom」等）を指定します。
ここでは「top」を指定します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
OKパターン②：imgタグに「display:block」を指定し画像をブロック要素にする
「display:block」を指定し、画像をブロック要素にします。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- どちらも画像（img要素）下のわずかな空白が無くなりました
イメージ通りの配置ができました。
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『画像（img要素）下にできる空白を無くす方法』を紹介させていただきました。
- imgタグに「vertical-align:baseline」以外の値を指定
- imgタグに「display:block」を指定し画像をブロック要素にする
皆さまの参考になれば幸いです。
コメント