如何在GitHub的README.md中使用外边距/内边距？

Question

问题

我试图在 GitHub 的 README.md 中显示多张图片，并在它们之间添加 x 像素的边距。但由于某种原因，GitHub 似乎会删除 margin-right: 30px 样式。

Markdown

[<img style="margin-right: 30px" src=foo.svg height=30>](https://www.example.com/)
[<img style="margin-right: 30px" src=bar.svg height=30>](https://www.example.com/)
<!-- ...and so on -->

注意：我尝试过在此处使用align="left"，这是有效的，但在lg、sm和xs设备上会出现问题。

- Vinay Sharma

---

类似的问题在这里 https://dev59.com/rm025IYBdhLWcg3wX03z - AgainPsychoX

Answer 1

您可以使用   来添加空格，而不是使用 CSS 的 margin 属性。

- user9346907

---

对于10像素和100像素的边距来说，这并不实用。 - Vinay Sharma

@Vinay Sharma，您还可以尝试在HTML中使用其他空白字符（https://en.wikipedia.org/wiki/Whitespace_character#Unicode），例如` `，` `，` `或` `。 - user9346907

但你真的认为使用其他字符会更有效率吗？我不明白为什么有人想要以数百个这样的字符结束。     ...100次 - Vinay Sharma

为什么你需要在Markdown文件中使用这么大的空格呢？%) 如果你想将某些内容向右推，则可以在HTML元素上使用align属性（GH .md支持它）。否则，一堆 就可以了，我还没有找到更好的解决方案 :) - user9346907

Answer 2

在 GitHub Markdown 中，不可能使用不同类型的样式。GitHub 仅允许在 HTML 标签内使用某些属性，并且如果用户将它们放在 HTML 标签内，则会删除某些属性。此外，由于 CSS 是清理过程的一部分，因此我们无法在 GitHub Markdown 中使用它。HTML 经过清理处理，会积极删除可能会对您和您的团队造成伤害的内容，例如

- Sadekujjaman

Answer 3

最后，你可以用hacky方法实现 ✨

虽然有点hacky，但是你可以使用<dl>、<dt>和<dd>标签的组合来制作缩进，而不需要任何枚举（不像<ul>/+/-/*或<ol>/1. 2. 3.）。

_{下面预览中的行是由---生成的，但没有这些也可以工作。}

请参见下面的示例：

This is normal text.

---

<dl>
  <dd>This gets indented, without enumeration nor dots.</dd>
</dl>

---

<dl>
  <dd>
    <dl>
      <dd>
        Multiple levels seems to be possible?
      </dd>
    </dl>
  </dd>
</dl>

---

<dl><dd><dl><dd><dl><dd><dl><dd>
Yes, but syntax gets messy, unless you write it single line :)
</dd></dl></dd></dl></dd></dl></dd></dl>

结果预览：

在我的GitHub gist中直接查看。

- AgainPsychoX

---

谢谢，这应该是被接受的答案。还要检查GitHub的markdown编译器（过滤器）：https://github.com/gjtorikian/html-pipeline/blob/main/lib/html/pipeline/sanitization_filter.rb - VityaSchel

Answer 4

你可以简单地添加

<div align="center">
<div align="center">
<div align="center">
<p>a</p>
</div>
<p>a</p>
<p>b</p>
</div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>

通过添加一个 div 元素，您可以自定义位置。您可以在我的 GitHub 上查看结果。。

- Vishnudas V

Answer 5

需要黑客攻击

由于GitHub的HTML清理（删除许多属性和值），您需要找到一种非正统的方式来为页面设置样式。我发现一种相当有效的方法是创建一个完全透明的不可见图像，并在您想要间距的图像之间包含它。

示例

<div align="center">
  <span><img src="./loginScreen.jpg" height=650 width=300 /></span>
  <span><img src="./aligner.png" height=50 width=150 /></span> <!--invisible-->
  <span><img src="./Expenses.jpg" height=650 width=300 /></span>
</div>

你可以像调整上/下、左/右的边距一样轻松地改变那个图像的高度和宽度。希望这可以帮到你！

- IvI-NewNez

Answer 6

嗯，我一直在寻找答案，找到了一些可以帮助但不能完全解决问题的链接。

1---这是用于水平间距的：

![image](link)    text

链接到答案

2---这样可以在您的图像周围放置一个圆角漂亮的边框： 只需在图像标签周围使用kbd标签。 我的Github个人资料

<kbd></kbd>

仍在寻找如何在Github个人资料上使用Github Markdown的Readme.md文件来设置边距的更多信息。

- Mina R.Nadifi