如何在GitHub个人主页README中设置margin-bottom？

我尝试给GitHub个人主页README里的社交图标段落设置margin-bottom，但完全没效果。（注：原问题附的图片显示社交图标组和下方内容间距过小，需要增加底部边距）

未设置边距的代码如下：

<p align="left">
<a href="https://twitter.com/dikshajain46" target="blank"><img align="center" src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="dikshajain46" height="30" width="100" /></a>&nbsp;
<a href="https://www.linkedin.com/in/diksha-jain-35208a241/" target="blank"><img align="center" src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="diksha jain" height="30" width="100" /></a>&nbsp;
<a href="https://www.hackerrank.com/jdiksha394" target="blank"><img align="center" src="https://img.shields.io/badge/-Hackerrank-2EC866?style=for-the-badge&logo=HackerRank&logoColor=white" alt="@jdiksha394" height="30" width="110" /></a>&nbsp;
<a href="https://www.leetcode.com/dixa_xyz" target="blank"><img align="center" src="https://img.shields.io/badge/-LeetCode-FFA116?style=for-the-badge&logo=LeetCode&logoColor=black" alt="dixa_xyz" height="30" width="100" /></a>&nbsp;
<a href="https://codepen.io/dixa1428" target="blank"><img align="center" src="https://img.shields.io/badge/Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white" alt="@dixa1428" height="30" width="100" /></a>&nbsp;
<a href="https://auth.geeksforgeeks.org/user/jdiksha394" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/geeks-for-geeks.svg" alt="jdiksha394" height="30" width="40" /></a>&nbsp;
</p>

GitHub的Markdown渲染对HTML元素的默认样式有自己的重置和覆盖，直接给<p>标签加margin-bottom大概率会被忽略。可以用下面几种靠谱的方法：

方法1：内联样式（GitHub支持部分inline style） #

给<p>标签添加style属性，明确指定底部边距值，比如：

<p align="left" style="margin-bottom: 2rem;">
<!-- 图标代码保持不变 -->
</p>

如果rem不生效，换成像素值（比如margin-bottom: 32px）即可。

方法2：插入空段落/换行（最简单粗暴） #

在社交图标段落后面直接加空段落或换行符，快速拉开间距：

<p align="left">
<!-- 图标代码保持不变 -->
</p>
<p></p>

或者用多个<br>标签：

<p align="left">
<!-- 图标代码保持不变 -->
</p>
<br><br>

方法3：容器div包裹 #

把整个图标组放进<div>容器，给容器加底部边距：

<div style="margin-bottom: 2rem;">
<p align="left">
<!-- 图标代码保持不变 -->
</p>
</div>

以上方法都能有效拉开社交图标组和下方内容的间距，亲测在GitHub README中生效。

内容的提问来源于stack exchange，提问作者diksha jain