user3706091 user3706091 - 1 month ago 4x
CSS Question

HTML & CSS - Why can't I get rid of the gap below this image?

I really am struggling here

I think I'm going mad. I've been trying to sort this problem out for hours, and I've stripped it down to the barebones!

There is a margin/gap/space below any image I put into this code

<div style="border:1px solid #000">hi</div>
<img src="assets/images/banner-top-beneath.jpg" style="width:600px;height:300px;margin:0;padding:0;border:1px solid #000">
<div style="border:1px solid #000">hi</div>
<div style="border:1px solid #000">hi</div>

Please save my sanity, what have I missed here?


You have to use display:block on the <img> tag to eliminate the gap.

By default, <img> is an inline element, more exactly a replaced inline element, so it behaves like one by default.