How to remove this white line at the bottom of the image?

HTML-CSS
1

Hello, fellow campers.

I am currently working on my first project for the Responsive Web Design certificate.

My issue is this white line at the bottom of the image. I want to remove it and understand why it happens.

Type O Negative - Tribute Page

I know it’s not from the actual image. I checked that.

After inspecting the code, it seems to come from <div class="image_container">, but I am not entirely sure.

Any help will be great.

Thank you!

P.S.: I hope I formatted the topic correctly. I’m still new at the forum.

1 Like
2

it’s kind hacky but maybe try:

#img-div{
  margin-bottom: -5px;
}
1 Like
3

It works, thanks. But this isn’t the "proper"way to fix it, is it?

I also wanted to know why it happens and work on the root cause of the issue.

But thank you for the quit reply.

1 Like
4

The white bar comes from the image. By default there will be a little bit of padding around the image. Get rid of this default with img {display:block;}

example:
The first image doesn’t use display block and second does

1 Like
5

I hope this answers your question better :slight_smile:

1 Like
6

Thank you for the explanation. It worked!

7

Edit: THIS PEN better shows the difference between inline ( the default ) and block:

https://codepen.io/David_Mat_Fraser/pen/YzNZoaa