When I put a div around an image, why is there spacing at the bottom? : <p>Take for example this fiddle: <a href="https://jsfiddle.net/ou33muc2/" rel="nofollow noreferrer">https://jsfiddle.net/ou33muc2/</a></p>

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

<p>I fail to understand why there is no gap between the div surrounding the image and the image on the top, left and right, but there is a gap on the bottom as shown by the red border.</p>

<p>Moreover, how can I remove this, so that the div fits snugly around the whole image?</p>

<p>Edit: I know it might seem a bit pointless having a div around a div around an image, but this is a scaled down problem where the question still applies, so please ignore the practicalities of it.</p>
