Уменьшить расстояние между заголовком и значками

Question

Я работаю над проектом и получил следующий фрагмент кода:

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

Это оставило меня таким: Изображение

Есть ли способ, которым яможно уменьшить разрыв строки между заголовком и значками, при этом значки не начинаются с новой строки в их тексте?

Answer 1

Вертикальное пространство представляет собой комбинацию по умолчанию сверху / снизу margins элементов h2 и p.Вам нужно будет добавить стили для уменьшения / удаления margin, margin-top и / или margin-bottom, используя таблицу стилей CSS:

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>