html - 有没有办法在 css 中保证 anchor ？

Question

我有一个固定的标题高度 50px。在我的 body 里，我有很多 anchor 。问题是，当我单击指向 anchor 的链接时， anchor 出现在我的固定标题下，我丢失了 50 像素的内容(我需要向上滚动 50 像素才能阅读标题下的内容)。

有没有办法为 50px 的 anchor 留边距？我的 body 充满了很多盒子(div)，它们之间有一个边距，所以我不能放置一个 50px 的空 div 然后在它之后锚定..

html:

<div id="header"></div>
<div id="content">
     <div class="box" id="n1"></div>
     <div class="box" id="n2"></div>
     <div class="box" id="n3"></div>
</div>

CSS:

#header{
    height: 40px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: fixed;
    text-align: center;
    z-index:2;
}

#content{
    padding-top: 50px; 
    margin: 0px;
}

.box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    vertical-align : top;
    padding: 1.4%; /* Keep it in percent (%) */
    margin-bottom: 30px;
    min-height: 200px;
}

Answer 1

欢迎来到 future :

.box {
  scroll-margin-top: 50px;
}

来源:https://css-tricks.com/almanac/properties/s/scroll-margin/