鏈接到頁面上的錨定標記時圍繞元素間距

Question

對於大多數人來說，這可能是一個愚蠢的問題，但似乎無法使其正常工作。我試圖跳到頁面上的一個錨點。這工作正常，如我提供的小提琴中所示。我創建了一個儘可能簡單的示例，試圖完成我想要完成的任務。

當我點擊鏈接時，它應該跳轉到頁面上的錨點，但我似乎無法弄清楚如何在錨點上添加間距。點擊錨時，它會跳轉到頁面上的錨點，但錨點位於瀏覽器的頂部。我在錨點之前需要空格，因爲頂部有一個簡單的導航欄。我已經嘗試了填充頂部，邊緣頂部，一切，並不能弄明白。這裏有一張圖片來解釋我想要做什麼。

單擊錨點時，它跳轉到頁面上的錨點，但默認位於瀏覽器的頂部。

什麼，我想要的是當我點擊的錨標記還有待間距。

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

我已經試過

margin-top: 

和

padding-top: 

希望我解釋的不夠好。我需要的間距的原因是因爲我有一個固定的頂部欄，它涵蓋了我在頁面上鍊接的標題，所以我需要空間來彌補這一點，似乎沒有任何工作。

我掛

標題文字是頂欄

我需要空間，當我在錨上點擊，所以我的頂欄犯規覆蓋文本的下方。

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/