imgタグの下に余白が出来る原因と解決方法【HTML/CSS】

vertical-alignの値をtop、middle、bottomのいずれかを指定する vertical-align プロパティの初期値が baseline である事が原因の為、 それ以外の値( top 、 middle 、 bottom )を指定 してあげれば大丈夫です，。

画像を配置した際に画像の下側に margin でも padding でもない余白が出来た事はありませんか? そんな時の原因と解決方法を解説していきます， inline が img要素 の初期値になります， inline-block では inline と同じく余白が出来てしまうので注意してください， これは、 vertical-align の値が baseline になっている為 です，ブロック要素に指定しても効きません， 画像(imgタグ)の下に余白が出来る場合の解決方法 画像( imgタグ )の下に余白が出来る場合の解決方法としてはいくつかあるのですが、今回は2つ紹介いたします。

， baseline vertical-align プロパティの初期値となります， ベースラインとは、文字の基準となる位置「 x-height 」というものが関係してくるのですが詳しくは割愛いたします， img {display: block;} さいごに いかがでしたでしょうか， img {vertical-align: top;}img {vertical-align: middle;}img {vertical-align: bottom;} display: block;を設定する もう一つの解決方法は displayプロパティの値にblockを指定 する事で解決します， 下側が少し空いているのが分かると思います， 仕様を見ると「 要素のベースラインを親要素のベースラインに揃えます 」とあります。

予期しない余白を防ぐ為に、予めリセットCSS等で対応しておくといいかと思います， 目次 画像(imgタグ)の下に余白が出来る原因 下のように imgタグ で画像を配置した際に下に余白が出来てしまった事はありませんか? 上の例では分かりやすいように、背景色をグレーにしてあります， その ベースラインを基準に line-height で出来る余白がある為 、今回のように画像の下側に余白が発生します。

これはインライン 要素やテーブルセル要素などに使用できます， vertical-align: baseline;とは何かvertical-align vertical-align は縦方向の位置を指定するプロパティです。