:targetでpadding-top

ちょっと何を言っているのかよくわからないですね。つまり:target擬似クラスでpadding-topを使うことによって、アンカーでページ内ジャンプ(<a href="#foo">...</a>とかで飛ぶやつです)した時に上部に余白をとってやろうというアイディアです。こうすることによって上部にメニューを固定していても重ならなくすることができるでしょうし、そうでなくても多くの場合ジャンプした先のコンテンツに対してキレイに余白が確保できるんではないかと。

Demo: Refine Anchor Jump with :target

Section #4に飛ぶリンクはデフォルトのもので、描画領域の上端に見出しが来てしまっています。Section #7に飛ぶリンクが:targetを使って改良したもので、上部に少し余白が確保されていることと思います。

#test7:target {
  padding-top: 1em;
}

CSSではこのようにしただけ(1em以上確保されているのはマージンの相殺が解除されるからです)ですが、想像以上に効果的な気がします。上部に固定メニューがある場合もデザイン全体を弄る必要はなく、そのメニューの高さ分多めに確保するだけでしょう。またここではデモなので#test7に対してのみ指定しましたが、実際に使う場合は以下のようにすると良いのではないかと思います。

section:target,
article:target {
  padding-top: 1em;
}

このままだと:targetだけ余白が変わってしまうので、元のマージンを減らしてやるなどの工夫もすると良いかもしれませんね。

section,
article {
  margin: 2em 0;
}

section:target,
article:target {
  margin-top: 1em;
  padding-top: 1em;
}

指定する要素(ここではsecionとarticle要素)でborderやbackgroundプロパティーを使いづらくなるなどといった問題が浮上してきたりもすることには注意が必要そうです。

padding-topを使う以外にもsecion要素の先頭に:before擬似要素を使ってスペーサーを埋め込むなどでも可能です。

section:target::before {
  display: block;
  height: 1em;
  content: "";
}

実際に使う場合はマージンの相殺が解除されることやセクションに対する枠線やパディング、さらにはセクションに含まれる最初の要素のマージンなど考慮すべきことが数多くあるので、このまま流用できるというものではないと思います。が、CSSルールのセレクターで:target擬似クラスを利用することによってスタイルのセットにわかりやすい意味を持たせることができるので、単にアンカーでジャンプしてくることがある要素に余白を予め確保しておくよりはわかりやすいCSSが書けるんじゃないでしょうか。