ページ内ジャンプで上部にスペース（マージン）を設定するCSS

やりたいこと

ヘッダーなどの要素のidをhttps://hoge/#idの値などのリンクで指定すると、ページ内ジャンプします。
その際、ジャンプ先の要素の上部にスペースが全く無いと少し見づらいため、CSSでスペースを設定しようとするものです。
ググると::beforeや::afterといった疑似要素を使ってスペースを追加するやり方もありますが、それよりもっと簡単な方法を探しました。

結論

scroll-margin-topでスペースを設定できます。
20pxとしている箇所は任意で設定してください。

hoge {
  scroll-margin-top: 20px;
}

例

ヘッダータグに適用する

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 20px;
}

指定したClassに適用する

.section {
  scroll-margin-top: 20px;
}

TailwindCSSで指定する場合

要素のclassに直接適用する

<div class="scroll-mt-5">
  ~~~
</div>

CSSで@applyを用いて適用する

h1, h2, h3, h4, h5, h6 {
  @apply scroll-mt-5;
}