减少标题和图标之间的空间

【问题标题】：Reduce space between header and icons减少标题和图标之间的空间
【发布时间】：2019-03-22 10:50:51
【问题描述】：

我正在做一个项目并且有以下代码sn-p：

<h2 style="color: #818181;">Details</h2>
<p><i class="fa fa-envelope"></i> xxxxxxx@gmail.com<br>
<i class="fa fa-phone"></i> 12345678<br>
<i class="fa fa-map-marker"></i> 1 Yeet Street, Azerbaijan</p>

这给我留下了这个： Image

有什么方法可以减少标题和图标之间的换行符，而图标不会从新行开始到其文本中？

【问题讨论】：

标签： html css layout position icons

【解决方案1】：

垂直空间是h2 和p 元素的默认顶部/底部margins 的组合。您需要使用 CSS 样式表添加样式以减少/删除 margin、margin-top 和/或 margin-bottom：

h2 {
  margin: 0;
}

p {
 margin: 0;
}

或者使用内联样式：

<h2 style="color: #818181; margin: 0">Details</h2>
<p style="margin-top: 0;"><i class="fa fa-envelope"></i> xxxxxxx@gmail.com<br>
<i class="fa fa-phone"></i> 12345678<br>
<i class="fa fa-map-marker"></i> 1 Yeet Street, Azerbaijan</p>

【讨论】：