包含图片的div容器出现1像素间隙的原因是什么？

问题原因 #

该1px间隙是浏览器子像素渲染机制导致的，当容器同时设置边框、圆角、overflow:hidden时，部分渲染内核计算元素边缘采样时会出现半像素偏差，视觉上就表现为原图不存在的间隙，和你猜测的border属性确实相关。

解决方案 #

按优先级尝试以下修改即可：

• 统一盒模型：给容器添加box-sizing: border-box，避免边框占据额外宽度导致的尺寸计算偏差
• 图片宽度自适应：将图片的固定宽度替换为width: 100%，让它自动适配父容器的内容区宽度，避免固定尺寸和父容器实际可容纳宽度不匹配
• 兜底补色：如果修改后仍存在间隙，给父容器添加和图片边缘颜色一致的background-color属性，就算有轻微的反锯齿漏缝也会被背景色盖住，视觉上完全消除间隙
• 渲染优化：也可给父容器添加transform: translateZ(0)开启GPU加速渲染，解决部分浏览器的子像素渲染偏差问题

修改后代码 #

.product-container{
  width: 225px;
  height: min-content;
  overflow: hidden;
  border-radius: 10px;
  border: 1px #dddddd solid;
  margin: 5px;
  padding: 0px;
  /* 新增 */
  box-sizing: border-box;
  /* 背景色可根据图片边缘实际颜色调整 */
  background-color: #000;
  transform: translateZ(0);
}
.product-image{
  width: 100%;
  height: 200px;
  object-fit: cover;
  display:block;
}

<div class="product-container" >
       <img class="product-image" src="你的图片地址" alt="">
    </div>

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