如何减小GitHub README中H2标题与html div的垂直间距

你设置margin/padding没生效的核心原因有两个：

1. GitHub Flavored Markdown 渲染引擎的默认规则：只要两个块级元素之间存在空行，就会自动插入带默认上下外边距的<p>标签，你之前的调整只作用在H2和div上，中间夹着自动生成的p标签，自然看不到效果
2. GitHub全局默认样式表给H2标签预设了margin-bottom: 16px的属性，普通低优先级的内联样式如果没加权重，根本覆盖不了这个默认值

可直接落地的调整方法：

• 最省事的写法：删掉H2标签和下方div之间的所有空行，把两个标签紧贴着写，从根源避免引擎自动插入p标签，同时直接给H2加内联样式覆盖默认下边距，示例：

<h2 style="margin-bottom: 6px;">技能列表</h2><div>
  <!-- 此处放你的技能图标、技能描述等内容即可 -->
</div>

• 如果需要保留代码排版的换行可读性，可以用局部样式块统一覆盖间距，注意把H2和div包在同一个父容器里，同时把中间自动生成的p标签的边距也清零：

<style>
  .skill-block h2 {
    margin: 0 0 4px 0 !important;
    padding: 0;
  }
  .skill-block p {
    margin: 0 !important;
    padding: 0;
  }
  .skill-list {
    margin: 0;
    padding: 0;
  }
</style>

<div class="skill-block">
  <h2>技能列表</h2>
  <div class="skill-list">
    <!-- 技能列表内容 -->
  </div>
</div>

注意：写的时候不要在<h2>闭合标签和下方<div>之间留空行，不然还是会触发自动p标签插入，多出来不必要的间距。

内容的提问来源于stack exchange，提问作者Fabrício Castro