Chrome中图像边缘的额外边距

Question

<div>
  <img src ='image.png'  style="display: block" />
</div>

在Chrome中，这会在图像的右侧呈现1px的边距并推送包装器div。如何删除保证金？

Answer 1

使用style属性中的margin和padding，如下所示：

<div>
  <img src ='image.png' style="display: block; margin: 0px; padding: 0px;" />
</div>

除此之外，您还可以通过添加样式"border:0px"来删除边框。

我没试过，请告诉我它是否有效。

Answer 2

使用CSS仅删除它仍会使您的网站在其他浏览器中看起来与众不同。最好使用CSS重置来在所有浏览器中获得相同的格式。

CSS重置如下： http://meyerweb.com/eric/tools/css/reset/

Answer 3

我也在Safari中看到了这种行为。试试这个。

<div class="group-holder" style="display: table;">
  <img src="myimage1.gif" style="display: table-cell;" />
  <img src="myimage1.gif" style="display: table-cell;" />
  <img src="myimage1.gif" style="display: table-cell;" />
</div>

这对我有用。