1

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

https://jsfiddle.net/k2gjjk8s/

<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?

user3706091
  • 115
  • 3
  • 12

2 Answers2

2

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.

Community
  • 1
  • 1
Zoli Szabó
  • 4,366
  • 1
  • 13
  • 19
0

https://jsfiddle.net/k2gjjk8s/1/

Use display:flex or inline for your images.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Yuri Pereira
  • 1,945
  • 17
  • 24