なんでimgの下に隙間が入るか問題の原因究明とその解決方法 - Qiita

今回シェアしたい問題点 濃いめの色の背景色をつけたdivタグにimgタグを挿入して、見るとなぜか下部にうっすらと線が入る問題がありました。その際に仕方なしに下の要素にネガティブマージンを効かせるなどして対応していたのですが、今回調べて原因がわかったので、そのことについて初心者向けにシェアしたいと思います。 具体例 例えば、こんな感じのコードを書くと、 ` Document ` 画像のように下に隙間ができてしまいます。 こちらのような現象について、原因がわからないまま周りのdivタグの高さを調整していたのですが、ようやく原因を突き止めました。次の章でご説明します。 現象の原因 原因はimgタグのvertical-alignでした。こちら、デフォルトでは、baselineになってしまっていました。これが原因でした(参考)。そのためこちらの値をbaseline以外に変更してあげたら、問題は解決し

[twol]

ありがとーう！