ページ内リンクのリンク先に上余白をつくる

ページ内リンクをしたときの、ちょっとした違い。
リンク先に飛んだ時、見出しの上の余白の違いを見比べてみてほしい。
⇒　ページ内リンク、リンク先の上に余白なし
⇒　ページ内リンク、リンク先の上に余白あり
⇒　ページ内リンク、リンク先の上に余白あり＋メニュー固定配置

▼「scroll-padding-top: 上余白 ;」となります

/* スムーススクロール リンク先に上余白 */
html,body{ 
    scroll-behavior: smooth; /* リンク移動スムース */
    scroll-padding-top: 20px;/* リンク先に上余白 */
}

⇒　データダウンロード　はこちら（link-ichi.zipというデータです）