How to Add Vertical Space Before an Anchor Link?

Positioning Anchor Links with Pixel Offset

When using anchor links, it's common for the linked-to section to appear at the very top of the page upon click. For scenarios where some vertical space is desired before the linked-to section, this issue arises.

Thankfully, "scroll-margin-top" property can be utilized to address this need. Here's how:

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

Assign the "scroll-margin-top" property with the desired pixel value to the element receiving the anchor link. In this instance, the anchor tag is bound to an element with the ID "anchor." By setting "scroll-margin-top" to 100px, it ensures that clicking on the anchor link will navigate to the "anchor" element with 100px of vertical spacing from the top of the page.

This is a browser-supported solution, providing a compatible way to control the vertical offset of anchor links.

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