0

I'm using this technique to show an overlay div on top of my images. Where does the extra 4px of height for the overlay come from?

I'm talking about the extra height of the overlay that can be seen extending below the bottom of the image.

#container {
  float: left;
  position: relative;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 200, 200, 0.5);
}
<div id="container">
  <div id="overlay"></div>
  <img src="http://via.placeholder.com/300x300" />
</div>

https://jsfiddle.net/yhd450o0/2/

OregonTrail
  • 8,594
  • 7
  • 43
  • 58
  • Are you talking about the area on the left and top of the container? –  Dec 29 '17 at 16:18
  • @Highdef no, I'm talking about the extra height that can be seen on the bottom of the overlay – OregonTrail Dec 29 '17 at 16:19
  • That would be because there's no fixed height for the container I'd say. If you try and use 300px instead for the container, you'll see the overlay takes only that height into account. You can set the img to block to solve this or keep a fixed height on the container. –  Dec 29 '17 at 16:23
  • The answer is because of "descenders" (the tail of letters like "y" and "g"). Thanks for the link to the duplicate question. – OregonTrail Dec 29 '17 at 17:19

0 Answers0