ブロックレベルの要素がその要素に含まれる画像よりも高いのはなぜですか？

Question

高さの指定がなければ、単一のイメージしか含まない<div>（または<p>または他の同様の要素）は、それより少し上になります。 Firefoxでは4px、Chromeでは5px高くなっているようです（Firebugとそのクローム同等物によると）。余分なスペースが画像の下に追加されます。

明らかに私はdivに高さを割り当てることでこれを解決できますが、そのスペースがそこにあり、それを排除する方法がある理由を理解したいと思います。

Answer 1

Imageは、ラインレベルの設定に準拠しており、デフォルトでテキストのベースラインに設定されています。

あなたはvertical-align: bottomを持っている画像を設定する場合は、それが下降ライン（テキスト行の一番下）

他のオプションはdisplay: blockに画像を設定し、このすべてのインラインギミックをスキップすることで画像を配置します

Answer 2

CSSに追加：デフォルトimgことで

img {display: block;} 

がdisplay:inlineので、すべてのテキストの行に関連するものを持っています。

Answer 3

を含むにline-height: 0px;を追加します。

imgをdisplay:blockに設定すると動作しますが、それ以外の場所にある場合は、画像を隠して表示するにはdisplay:none/display:inlineと表示されます。