-1

Take for example this fiddle: 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>

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.

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

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.

Johannes
  • 64,305
  • 18
  • 73
  • 130
Steve Jobs
  • 345
  • 2
  • 3
  • 14
  • I would venture a guess that this is due to the default styling implemented by the browser. Perhaps try running with a CSS [reset](http://cssreset.com/scripts/eric-meyer-reset-css/)? – Sam Gomena Mar 12 '17 at 00:27
  • Could you provide an insight as to how to do this? – Steve Jobs Mar 12 '17 at 00:31
  • 1
    this has been answered so many times in here, that a simple google search for [div gap img](https://www.google.com/search?q=div+gap+img) would give you a lot of results to SO, you should research better than ask after it – dippas Mar 12 '17 at 01:25

2 Answers2

3

Because the image is vertically aligned at the baseline - where text usually would be placed. And there's space below the baseline, for letters with "descenders" like j, g, p etc.

To avoid that, just add line-height: 0; to the container:

https://jsfiddle.net/5czathrh/1/ (edit: updated)

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

It's the text descender space (the area below the "baseline"). If you set display: block on the image you can lay it out with more traditional margin/etc values.

Chad Robinson
  • 4,575
  • 22
  • 27