JavaScript – How to completely fill child div in div with borders in chrome?

I have a problem I need to fill the image in the div with borders, but in Chrome 96.0 I see some inside margins from top and left, and I don’t know how to delete them.

This is my code:

.wrapper {
  width: 36px;
  height: 36px;
  border: solid 2px red;
  padding: 0;
}

.img {
  width: 100%;
  height: 100%;
  background: green;
  margin: 0;
}
<div class="wrapper">
  <div class="img"></div>
</div>

What I’m looking for:

Enter image description here.

What my friend sees in Safari:

Enter image description here.

Write a Comment