How to Create Space Above an Anchor Link?

Adjusting Anchor Link Position on Page

When accessing a page section via an anchor link, users typically expect it to bring them to the linked area at the top of the page. However, in certain scenarios, it may be desirable to maintain some vertical space above the linked element.

To achieve this, the solution lies in the scroll-margin-top property, which specifies the amount of space (in pixels) that should be maintained between the linked element and the top of the page after the anchor link is clicked.

Example code:

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>

In this example, the #anchor element will be positioned 100 pixels below the top of the page after the corresponding anchor link is activated.

It's important to note that the scroll-margin-top property is supported across modern browsers, ensuring reliable behavior on various platforms.

The above is the detailed content of How to Create Space Above an Anchor Link?. For more information, please follow other related articles on the PHP Chinese website!