叠加层的额外4px高度来自何处？

Question

我使用此技术在我的图片上显示叠加div。叠加层的额外4px高度来自哪里？

我正在谈论可以在图像底部下方看到的叠加层的额外高度。

＆＃13;

＆＃13;

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

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 200, 200, 0.5);
}

＆＃13;

<div id="container">
  <div id="overlay"></div>
  <img src="http://via.placeholder.com/300x300" />
</div>

＆＃13;

＆＃13;

＆＃13;

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