アンカータグへのリンク時に要素の周りにスペースがある場合

Question

ほとんどの場合は愚かな質問かもしれませんが、正しく動作するようには見えません。私はページ上のアンカーにジャンプしようとしています。これは私が提供したフィドルで示されているようにうまくいきます。私は達成しようとしているもののシンプルなサンプルを作成しました。

リンクをクリックすると、ページ上のアンカーにジャンプするはずですが、アンカーの上にスペーシングを追加する方法がわかりません。アンカーをクリックすると、ページ上のアンカーにジャンプしますが、アンカーはブラウザの上部にあります。私は上にスティックのナビゲーションバーがあるので、アンカーの前にスペースが必要です。私はパディングトップ、マージントップ、すべてを試しましたが、それを理解することはできません。私は何をしようとしているのかを説明するイメージを得ます。

アンカーをクリックすると、ページ上のアンカーにジャンプしますが、デフォルトではブラウザの先頭になります。

私はアンカータグをクリックすると、どのような私が欲しいの間隔することのためにそこにあります。私は

margin-top: 

と

padding-top: 

を試してみた

https://jsfiddle.net/yao25Lxc/3/

は、私はそれが十分に説明願っています。スペースが必要な理由は、固定されたトップバーがあり、ページ上にリンクしている見出しが含まれているため、それを補うためのスペースが必要なため、何も動作していないようです。私がリンクされ

タイトルテキストは、私の上のバーは、テキストをカバーdoes notのように、私はアンカーをクリックしたときに私は間隔を必要とするトップバー

の下にあります。

Answer 1

#anchorのCSSを作成し、そこにあなたのpadding-topを適用します。たとえば、次のように

#anchor{ padding-top: 30px } 

https://jsfiddle.net/bonez0607/59eqnqyp/

Answer 2

ターゲットH3要素とそれに行の高さを追加します。最も洗練されたソリューションではないかもしれませんが、機能します。

HTML：

<nav> 
<ul> 
<li class=""><a href="#anchor">Test</a></li> 
</ul> 
</nav> 
<div class="spacecontainer"> 

</div> 

<h3 id="anchor"> 
<a id="">TEXT</a> 
</h3> 
<div class="spacecontainer"> 

</div> 
<div class="spacecontainer"> 
</div> 

CSS：

.spacecontainer { 
    width:100%; 
    height:500px; 
} 

h3 { 
line-height:50px; 
} 

https://jsfiddle.net/8awx6hy4/