画像を配置した際に画像の下側にmarginでもpaddingでもない余白が出来た事はありませんか?
そんな時の原因と解決方法を解説していきます。
画像(imgタグ)の下に余白が出来る原因
下のようにimgタグで画像を配置した際に下に余白が出来てしまった事はありませんか?
上の例では分かりやすいように、背景色をグレーにしてあります。
下側が少し空いているのが分かると思います。これは、vertical-alignの値がbaselineになっている為です。
vertical-align: baseline;とは何か
vertical-align
vertical-alignは縦方向の位置を指定するプロパティです。
これはインライン要素やテーブルセル要素などに使用できます。ブロック要素に指定しても効きません。
baseline
vertical-alignプロパティの初期値となります。
仕様を見ると「要素のベースラインを親要素のベースラインに揃えます」とあります。
ベースラインとは、文字の基準となる位置「x-height」というものが関係してくるのですが詳しくは割愛いたします。
そのベースラインを基準にline-heightで出来る余白がある為、今回のように画像の下側に余白が発生します。
画像(imgタグ)の下に余白が出来る場合の解決方法
画像(imgタグ)の下に余白が出来る場合の解決方法としてはいくつかあるのですが、今回は2つ紹介いたします。
vertical-alignの値をtop、middle、bottomのいずれかを指定する
vertical-alignプロパティの初期値がbaselineである事が原因の為、それ以外の値(top、middle、bottom)を指定してあげれば大丈夫です。
img {
vertical-align: top;
}
img {
vertical-align: middle;
}
img {
vertical-align: bottom;
}display: block;を設定する
もう一つの解決方法はdisplayプロパティの値にblockを指定する事で解決します。
inlineがimg要素の初期値になります。inline-blockではinlineと同じく余白が出来てしまうので注意してください。
img {
display: block;
}さいごに
いかがでしたでしょうか。
予期しない余白を防ぐ為に、予めリセットCSS等で対応しておくといいかと思います。
