CODEWITHSUNDEEP
htmlcss
user3706091
user3706091

Reputation: 125

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

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?

Upvotes: 1

Views: 63

Answers (2)

Zoli Szab&#243;
Zoli Szab&#243;

Reputation: 4534

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.

Upvotes: 2

Yuri Pereira
Yuri Pereira

Reputation: 1995

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

Use display:flex or inline for your images.

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

Upvotes: 0

Related Questions