CSS设置图片边框出现缝隙的原因及消除方法

问题原因 #

出现这个间隙有两个核心原因：

• img属于行内替换元素，默认vertical-align属性值为baseline，浏览器会为行内内容的文字基线下方预留下行字符的空间，哪怕img旁没有文字，这个预留空间也会存在，看起来就是图片和边框之间有缝隙。
• 你使用了border-radius: 50%的圆角设置，边框和图片内容衔接处的抗锯齿半透明过渡，会透出背景色，放大间隙的视觉效果。

解决方法 #

可以任选以下一种方案修改CSS即可消除间隙：

1. 修改img的垂直对齐属性，覆盖默认的基线对齐

img {
  width: 200px;
  height: 200px;
  border-radius:50%;
  border: solid #2ba272 3px;
  /* 新增这行，top/middle/bottom都可以 */
  vertical-align: middle;
}

body{
background-color:#f91880;
}

2. 将img转为块级元素，不再触发行内元素的基线对齐规则

img {
  width: 200px;
  height: 200px;
  border-radius:50%;
  border: solid #2ba272 3px;
  /* 新增这行 */
  display: block;
}

body{
background-color:#f91880;
}

3. 针对圆角抗锯齿导致的透色间隙，可以用内阴影代替边框

img {
  width: 200px;
  height: 200px;
  border-radius:50%;
  /* 用阴影代替边框 */
  box-shadow: 0 0 0 3px #2ba272;
}

body{
background-color:#f91880;
}

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