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.
[<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.
You could use to make space instead of CSS margin.
 ,  ,   or  .      ...100timesWhile 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:
It is not possible to use different types of
stylesin 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, andclassoridattributes.
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.
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:
 text
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.
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
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.
<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!
You can use hspace and vspace to add horizontal and vertical padding.
[<img src=foo.svg height=30 hspace=15>](https://www.example.com/)
[<img src=bar.svg height=30 hspace=15>](https://www.example.com/)
These do apply the space to both sides of the image, so you may have to fiddle with it if you want only one side or the other.
