ヘッダーを固定した時のページ内リンクのズレを解消する方法

ヘッダーを固定する時
position:fixed;を使用して固定をすると思いますが、
ページ内リンクを行う時にヘッダー文の高さが被ってしまいます。

例えばheaderの高さがheight:100px;だったとすると100px分被ってしまします。

解消法としましてはpadding-topで高さ分ずらし、marjin-topでマイナス値で戻すとうまいこといきます。

<header>ヘッダー</header>
	<main>
		<p>メインコンテンツ</p>
		<a href="#link01">リンク01</a>
		<p id="link01">リンク先</p>
	</main>
<footer>フッター</footer>

header {
	position:fixed;
	width:100%;
	height:100px;
	top:0;
	left:0;
	z-index:100;
}
main{
	margin-top:100px;
}
#link01{
	padding-top:100px;
	margin-top:-100px;
}

※
ただデザインによってはpaddingやmarginでマイナス値をずらしたりすると同じようにならないので気をつけて設定した方が良い。
※
スマホなどでヘッダーの高さが変われば高さの値も変わるので細かく調整する必要がある。