浏览器缩放时图片与其边框之间出现异常边距该如何解决？

问题原因 #

该问题是浏览器亚像素渲染逻辑与行内元素默认布局规则共同作用的结果：

1. img属于行内替换元素，默认vertical-align属性值为baseline，会预留出对应文字下行边的空白区域，页面缩放时元素尺寸计算出现小数偏移，这个预留空白就会暴露为图片和边框之间的间隙，间隙位置随缩放比例变化的原因就是不同缩放比例下的小数像素对齐规则不同。
2. 你提供的代码中，a标签内部img标签前存在空白字符，缩放时空白字符的宽度计算偏差也会加剧间隙问题。

修复方案 #

方案1：修改img垂直对齐规则（最轻量化，不改变原有布局特性） #

仅需给img新增vertical-align: bottom属性，覆盖默认的基线对齐规则即可消除预留空白：

.other-album img{
  width: 332px;
  height: 332px;
  border: #156196 solid 5px;
  margin-bottom: 30px;
  /* 新增以下代码 */
  vertical-align: bottom;
}

方案2：将img改为块级元素（适合图片单独占一行的场景） #

给img新增display: block属性，彻底消除行内元素的默认空白特性：

.other-album img{
  width: 332px;
  height: 332px;
  border: #156196 solid 5px;
  margin-bottom: 30px;
  /* 新增以下代码 */
  display: block;
}

方案3：消除行内空白字符影响 #

给img的父级a标签设置font-size: 0，避免标签内的空白字符在缩放时产生额外间隙：

.other-album a {
  font-size: 0;
}

兜底兼容方案 #

如果需要兼容极端老旧浏览器，可以给a标签设置和边框同色的背景色，就算出现极小间隙也会被背景色覆盖，视觉上不会出现异常：

.other-album a {
  background-color: #156196;
}

内容的提问来源于stack exchange，提问作者Ishayahu