如何在 GitHub README.md 中使用边距/填充？

Question

Issue

I'm trying to display several images in GitHub's README.md with a margin of x px between them. But for some reason GitHub seems to strip away the margin-right: 30px style.

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 -->

Note: I tried align="left" here which works fine but breaks on lg sm xs devices.

Answer 1

It is not possible to use different types of styles in GitHub markdown.

Github only allows to use of some attributes inside the HTML tag and also removes some attributes from the tag if the user puts them inside the HTML tag.

Also, we cannot use CSS in GitHub markdown because it is part of the sanitization process.

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as <script> tags, inline styles, and class or id attributes.

source: https://github.com/github/markup#github-markup

If we use an HTML block in the markdown file something like

<div style="margin-right: 30px;">

Markdown content goes here.

</div>

Then, When GitHub rendered it, the style attribute was automatically removed and no CSS style was applied. It will render it something like

<div>

Markdown content goes here.

</div>

NB: In the case of positioning, the align attribute is the only way that will currently work. Despite being deprecated, it's still rendered.

Answer 2

You could use   to make space instead of CSS margin.

Answer 3

At last, you can do it hacky way ✨

While a bit hacky, you can use <dl> , <dt> and <dd> tags in combination to make indent without any enumeration (unlike <ul> / + / - / * or <ol> / 1. 2. 3. ).

_{The lines in preview below are generated by --- , but it works without those.}

See example below:

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>

Result preview:

Check it directly in my GitHub gist here.

Answer 4

You can simply add

<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>

By adding a div you can customize the position You refer the outcome in my GitHub