【HTML】ページ遷移先でのアンカーリンクが隠れてしまう

HTMLコーディング中、aタグに遷移先URLと#anc01のようにid名を付けて、遷移後に指定の要素までジャンプ（もしくはスクロール）するように実装することがあると思います。ただこの場合だとヘッダーが追従してくるタイプのWEBページではジャンプ先の要素がヘッダーに隠れてしまうという難点があります。
この症状をCSSで簡単に解決する方法を記載します。
※スクロール処理については解説しません。

padding-topとmargin-top（マイナス値）を併用する。

こんな感じです。※80pxの部分は追従してくるheaderの高さを指定してください。

#anc01 {
    padding-top: 80px;
    margin-top:　-80px;
}

一見padding-topで確保した80pxをmargin-topで相殺しているから意味が無いようにも見えます。
確かに見た目上は相殺しているので見た目は変わりません。むしろそれが良いんです。

要素のmargin-topがどれくらいであろうがジャンプ（スクロール）後の表示には影響を及ぼしません。ただpadding-topは要素の上部内側に間隔を確保しているのでスタイルをあてていない時と比べると、80px手前で要素に到達することになります。

これ考えた人天才ですよね。

追従ヘッダーのせいで遷移後アンカーリンクが隠れてしまう場合は使ってみると良いと思います。