Strange pixels showing up D:

Hello! I was doing a project by myself and something strange is going on with this code: HTML

<div class="card-top">
  <img src="https://i.pravatar.cc/300" alt="User profile picture" class="profile-picture">
</div>

<div class="card-top">
  <img src="https://i.pravatar.cc/300" alt="User profile picture" class="profile-picture">
</div>

CSS

.card-top {
    background-color: #4070f4;
}

.card-top {
    background-color: #4070f4;
}

I changed the background-color just to see that there are (exactly) 7 pixels below my image, and I honestly don't know where are those coming from. Maybe is some default setting of the page which generates the image on my HTML, but I'm not sure. Does someone know what's going on??

10 Replies

vince•17mo ago

add display: block to your image and see if that fixes it

WebMechanic•17mo ago

Maybe is some default setting of the page which generates the image on my HTML

most likel because neither div nor img have paddings or extra white space by default. check with the style inspector in your browser devtools where that extra 7px are comming from.

Brunkz34•17mo ago

I tried with other images and that problem still persisted, but I added that line and it worked how did you know that was the solution?

vince•17mo ago

I've been around the block a few times 😉 Why does it work? I'm not really sure myself on the technicalities of it 😂, I'm sure someone here could explain It's a good idea to add this to your resets stylesheet:

img {
  display: block;
  max-width: 100%;
}

img {
  display: block;
  max-width: 100%;
}

Brunkz34•17mo ago

that's a great idea actually i'll be applying it on my new projects from now on thanks man!!

Mannix•16mo ago

img is a inline element meaning it has display set to inline by default.

Jochem•16mo ago

iirc, it's because it's a replaced element with display: inline, which I think puts a phantom text character in there, or at least generates a line where one could be. The extra bit of height is that phantom character. You can see it's an issue with having an inline element by setting font-size or line-height to 0, it makes it go away as well (though display: block is probably the better solution)

Mannix•16mo ago

if you use vertical-align: bottom you will get the same result as display: block 🙂

Jochem•16mo ago

many possible fixes! 😄

13eck•16mo ago

The reason setting displat to block is because by default the image element is inline, which means it has a line height. The line height is to give "breathing room" between lines of a paragraph and other inline elements. The default line height is 1.2, so 20% of the current font size is added to the bottom for breathing room. Once you change the display to block the line height changes from "line space" to "minimum box height" and allows the image to be full-height and no bottom "space" added.

Gaming

Programming

Strange pixels showing up D: