divを画像の周りに置くと、その下にスペースがあるのはなぜですか？

Question

例えば、このバイオリンを取る：https://jsfiddle.net/ou33muc2/

<div class = "overallDiv"> 
<div id="example"><img src = "http://writingexercises.co.uk/images2/randomimage/slimy.jpg" style="width:100vw; opacity: 0.5;"/></div></div> 

私は左と右の画像と上に画像を囲むdivの間に隙間がない理由を理解することはできないが、下部に隙間があります赤い枠線で示されるように。

さらに、これを削除してdivを画像全体にぴったり収まるようにするにはどうすればよいですか？

編集：イメージの周りにdivを置いているのはちょっと無意味なように思えるかもしれませんが、これは問題がまだ適用されている縮小された問題ですので、その実用性は無視してください。

Answer 1

イメージはベースラインで垂直に配置されているため、通常はテキストが配置されます。そして、ベースラインの下の空間は

は、それを避けるだけでコンテナにline-height: 0;を追加するなどJ、G、Pのような "ディセンダー" との手紙のために、あります：

https://jsfiddle.net/5czathrh/1/（編集：更新）

Answer 2

それはテキストデセンダ空間（「ベースライン」の下の領域）です。イメージにdisplay: blockを設定した場合、より伝統的なマージン/ etc値でレイアウトすることができます。