为什么图像周围的 1px 填充在主要浏览器中呈现不同？

Question

我有一个 span，里面有一张图片。

span 有一个 1 px 的边框和一个 padding 以在 span 和图像之间提供一个小间隙，但是 1px padding 在所有浏览器中呈现不同，我没有找到解决这个问题的最佳方法。

跨度有一个显示：inline-block 因为它旁边必须有另一个元素，但我注意到如果我将显示更改为块可能看起来更好。

<td class="tdCartCol4">
   <span>
       <img src="/medias/sys_master/loropiana/photosOfColors/hash000/8814966046750.jpg">
   </span>
   <p> W538 </p>
   <br>
   <i>blue navy </i> 
</td>

CSS

span {width: 17px;
height: 17px;
padding: 1px;
margin-top: 4px;
display: inline-block;
border-radius: 50%;
border: 1px solid #b76e4d;}

img {
width: 17px;
height: 17px;
border-radius: 50%;

p {
font-size: 15px;
display: inline-block;
margin-left: 5px;
}
}

Chrome

Firefox，即使在具有两个相同设置的同一个文件中，它们看起来也不一样

Answer 1

与其做同样的事情两次（跨度和图像上的边界半径、高度和宽度），为什么不一次做呢？

从跨度中删除所有样式并使用：

img {
width: 17px;
height: 17px;
border-radius: 50%;
padding: 1px;
border: 1px solid #b76e4d;}

这将在不同的浏览器中呈现（据我测试）正确。

我建议给 img class 并在上面做样式 class 否则所有图像都是圆形的。

为什么图像周围的 1px 填充在主要浏览器中呈现不同？

Why 1px padding around image renders different in major browsers?

css

cross-browser

padding