图像和边框之间的奇怪边距答案

【问题标题】：Strange margin between image and border图像和边框之间的奇怪边距
【发布时间】：2021-12-02 02:02:35
【问题描述】：

我有简单的 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>

用css：

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

看起来很完美。但是如果我在浏览器中放大它，我会看到图像和它的边框之间有奇怪的边距。该边距的位置取决于缩放程度

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

【问题讨论】：

我认为是因为img是内联元素，尝试添加display:inline-block;到img

标签： css margin

【解决方案1】：

坦率地说，我不知道为什么会发生这种情况，也不知道在这种情况下如何阻止它发生。但我找到了一种解决方法（至少对于 chrome）——不要使用<img>，而是将背景设置为<a>！

<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%;
}

小提琴：https://jsfiddle.net/oj7cf021/4/

【讨论】：

谢谢，它可以工作，但这不是一个好方法，因为我需要混合数据和表示。但再一次谢谢你！

【解决方案2】：

您需要将 box-sizing 属性设置为您的图像。

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

或者如果锚点已经是显示内联块，您可能需要添加 font-size: 0;

【讨论】：

我更新了小提琴，但我仍然看到这个问题
您是否也单击了运行？它不会自动更新。你用的是什么浏览器？