14

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.

Vinay Sharma
  • 3,291
  • 4
  • 30
  • 66

6 Answers6

4

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>

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

Sean
  • 6,873
  • 4
  • 21
  • 46
Sadekujjaman
  • 437
  • 4
  • 7
4

You could use &nbsp; to make space instead of CSS margin.

Sean
  • 6,873
  • 4
  • 21
  • 46
  • Impractical for 10s and 100s of pixels of margin. – Vinay Sharma Jan 15 '22 at 06:44
  • @Vinay Sharma, you could also try other whitespace characters available in HTML (https://en.wikipedia.org/wiki/Whitespace_character#Unicode), such as ` `, ` `, ` ` or `&hairsp;`. –  Jan 17 '22 at 00:03
  • Still, do you really think using other characters would be efficient? I don't see a reason why would someone like to end up with 100s of such characters.`      ...100times` – Vinay Sharma Jan 17 '22 at 09:53
  • Why would you need such huge spaces in a markdown file? %) Use `align` property on the HTML element if you want to push something to the right (GH .md supports it). Otherwise a bunch of ` `s is fine, I haven't found a better solution :) –  Jan 18 '22 at 15:25
2

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: Result preview

Check it directly in my GitHub gist here.

Makyen
  • 31,849
  • 12
  • 86
  • 121
AgainPsychoX
  • 1,527
  • 1
  • 16
  • 20
  • Thank you, this should be accepted answer. Also check GitHub's markdown compiler (filter): https://github.com/gjtorikian/html-pipeline/blob/main/lib/html/pipeline/sanitization_filter.rb – VityaSchel Jul 20 '22 at 14:15
0

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 The result looks like

Vishnudas V
  • 21
  • 5
0

Hack Required

Due to GitHub's HTML sanitization (removing a lot of the attributes and values), you'll need to find an unorthodox way of styling your page. One way I found pretty effective was to create an invisible image, completely transparent, and include that between the images you want margin.

Example

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

You can easily alter the height and width of that image as if it were the top/bottom, left/right margin. Hope that helps!

IvI-NewNez
  • 1
  • 1
  • 1
0

Well I have been seeking the answer and I found some links that can help but not kinda solve it all.

1---This is for Horizontal Spacing:

![image](link)&nbsp;&nbsp;&nbsp;&nbsp;text

Link to the Answer

2---This Put a rounded nice border around your image: Just use kbd tag around your image tag. My Github Profile

<kbd></kbd>

Still seeking for more intel of having margins on Github profile using Github Markdown in Readme.md file.

Mina R.Nadifi
  • 1
  • 1