CSS设置img元素border时不同显示器出现间隙如何解决

问题原因 #

<img> 默认属于行内替换元素，浏览器默认给行内元素设置了 vertical-align: baseline 的对齐规则，不同显示器的DPI缩放比例差异、浏览器对非整数像素的渲染舍入逻辑不同，就会触发你观察到的边框和图片之间的白色间隙。

解决方法 #

你可以任选以下任意一种方案修复：

• 方案1：修改图片垂直对齐规则
  给img样式新增 vertical-align: bottom （也可设为 top/middle，只要替换默认的baseline即可），这是兼容性最好的通用方案。
  修改后的CSS代码示例：

  img {
    max-width: 200px;
    border: 5px solid black;
    vertical-align: bottom;
  }
  

• 方案2：将图片改为块级元素
  给img样式新增 display: block，直接消除行内元素的基线间隙规则，适合图片单独占一行的场景。
• 方案3：给外层容器设置字号为0
  在外层div的样式中新增 font-size: 0，可以消除行内元素排版产生的多余空隙，注意如果div内还有其他文本内容，需要单独给文本元素重新设置字号，避免文字无法显示。

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