如何在GitHub README.md中使用margin/padding？图片间距设置失效求助

GitHub的Markdown渲染器确实会过滤掉<img>标签上的部分内联样式（比如你遇到的margin-right），这是出于安全和渲染一致性的考虑。下面给你几个可靠的解决方案：

方法1：给包裹图片的链接标签添加样式 #

把每个带链接的图片放在<a>标签里，给<a>设置display: inline-block和margin-right，GitHub通常不会过滤这个层级的样式：

<a href="https://www.example.com/" style="display: inline-block; margin-right: 30px;">
  <img src="foo.svg" height="30">
</a>
<a href="https://www.example.com/" style="display: inline-block; margin-right: 30px;">
  <img src="bar.svg" height="30">
</a>

这个方法在响应式设备上也能保持稳定的间距，不会像align="left"那样在小屏失效。

方法2：用表格控制间距（适合更复杂的布局） #

如果需要更精准的布局控制，可以用HTML表格，通过单元格的padding-right来设置图片间距：

<table>
  <tr>
    <td style="padding-right: 30px;">
      <a href="https://www.example.com/"><img src="foo.svg" height="30"></a>
    </td>
    <td style="padding-right: 30px;">
      <a href="https://www.example.com/"><img src="bar.svg" height="30"></a>
    </td>
    <!-- 更多图片单元格 -->
  </tr>
</table>

表格布局在各种屏幕尺寸下的表现都比较稳定，不会轻易出现间距失效的问题。

方法3：用空白占位（简易但不够精准） #

如果对间距的像素精度要求不高，可以用多个非换行空格 来分隔图片，比如：

[<img src=foo.svg height=30>](https://www.example.com/) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [<img src=bar.svg height=30>](https://www.example.com/)

不过这种方法的间距受字体影响，无法精准控制到30px，适合快速临时解决。

总结一下，最推荐的是方法1，既满足精准的像素间距，又能在响应式设备上保持一致的表现，完美替代失效的align="left"和被过滤的<img>内联样式。

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