今回シェアしたい問題点
濃いめの色の背景色をつけたdivタグにimgタグを挿入して、見るとなぜか下部にうっすらと線が入る問題がありました。その際に仕方なしに下の要素にネガティブマージンを効かせるなどして対応していたのですが、今回調べて原因がわかったので、そのことについて初心者向けにシェアしたいと思います。
具体例
例えば、こんな感じのコードを書くと、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="background:#000">
<img src="https://placehold.jp/150x150.png" alt="テスト画面">
</div>
</body>
</html>
画像のように下に隙間ができてしまいます。
こちらのような現象について、原因がわからないまま周りのdivタグの高さを調整していたのですが、ようやく原因を突き止めました。次の章でご説明します。
現象の原因
原因はimgタグのvertical-alignでした。こちら、デフォルトでは、baselineになってしまっていました。これが原因でした(参考)。そのためこちらの値をbaseline以外に変更してあげたら、問題は解決します。
具体的には以下のようにimgタグのstyleをmiddleやtopなどbaseline以外に設定してあげてください。
<img style="vertical-align:bottom" src="https://placehold.jp/150x150.png" alt="テスト画面">
そうすると、画像の下に隙間がなくなること確認できるかと思います。
まとめ
今回はなんでimgの下に隙間が入るか問題の原因究明とその解決方法について記載しました。baselineという初期設定が悪さをしていた原因でした。また、この問題はimgタグに限らず、inline要素ならば、起こる問題です。「なんか隙間できるな」って思った際には、ぜひともこちらの方法お試しいただければ幸いです。