Set the space you want in front of it on the destination element. The id goes right on the destination element, so you need neither an empty element nor a wrapper.

h2 {
  scroll-margin-top: 80px;
}

<h2 id="contact">Contact</h2>

The heading was wrapped in a container, and an empty anchor element was absolutely positioned and shifted up by the header height. Since the id goes on the anchor, the heading’s layout stays the same, but you need an extra element and a wrapper just for the id.

.section {
  position: relative;
}

.anchor {
  position: absolute;
  top: -80px;
}

<section class="section">
  <a id="contact" class="anchor"></a>
  <h2>Contact</h2>
</section>