Strange margin between image and border-CodePudding

I have simple html:

<div class="other-album">
   <a href="#"> <img src="https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg" /></a>
</div>

with css:

.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
}

It looks perfect. But if I zoom it in browser I see strange margin between image and its border. And place of that margin depends on zoom degree

https://jsfiddle.net/ishayahu/d51zjrkp/1/

CodePudding user response：

You need to set the box-sizing property to your image.

.other-album img{
width: 332px;
height: 332px;
border: #156196 solid 5px;
margin-bottom: 30px;
box-sizing: border-box; // solves your issue
}

Or if the anchor is already a display inline-block you may need to add font-size: 0;

CodePudding user response：

To be frank, I have no idea why that happens or how to stop it from happening in this case. But I found a workaround (at least for chrome) - Don't use <img>, set background to the <a> instead!

<div class="other-album">
  <a href="#"></a>
</div>

.other-album a {
    width: 332px;
    height: 332px;
    border: #156196 solid 5px;
    margin-bottom: 30px;
    display: block;
    background-image: url("https://pravdamuzika.lasil.ru/media/files/covers/2021_8_13__Panimonica_Offline_Oblozhka.jpg");
    background-size: 100% 100%;
}

Fiddle: https://jsfiddle.net/oj7cf021/4/