なぜ画像の下にスペースがありますか？

Question

padding:0;margin:0が適用されても、画像の下に不思議な空白ができます。

Demonstration

赤い境界線が画像を抱擁べきであるが、下側の空間があります。

この原因は何ですか。このスペースを削除するにはどうすればよいですか？

Answer 1

イメージ（および一般にインラインブロック要素）は、文字のように扱われます。

このように、それらはベースラインのルールに従います。

通常のテキストでは、この文のように、ベースラインはほとんどの文字の一番下の行です。

しかし、p、q、jなどの一部の文字には、ベースラインを下回るテールがあります。これらのテールが次の行の文字と衝突するのを防ぐために、ベースラインとボトムラインの間にスペースが確保されています。テキストがない場合でも、

は

（WHATWGからの画像）

そこで、画像がベースラインに整列される。

この図はテキストで使用される異なるラインを示します。幸いなことに、修正は非常に簡単です：

img {vertical-align:bottom} 

これも謎のスペースを削除し、ラインの下に画像を合わせます。

画像が小さい（線の高さよりも小さい）場合は、画像の上に表示される謎の空間が表示されることがあります。これを修正するには、コンテナ要素にline-height:1pxを追加します。

これは私が見た多くの人々がこれと同様の問題について尋ねるのに役立ちます。ブロックレベル要素

img { 
    display: block; 
} 

にimg変更

Answer 2

はまた、画像の下のスペースを削除します。

Answer 3

チェックアウトこのCSS jsfiddle CSS CSSの

div {border:1px solid red;width:100px;line-height:0} 
img {width:100px;}