【问题标题】: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)——不要使用&lt;img&gt;,而是将背景设置为&lt;a&gt;

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

【讨论】:

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