앵커 링크 앞에 수직 공간을 추가하는 방법은 무엇입니까?

픽셀 오프셋을 사용하여 앵커 링크 위치 지정

앵커 링크를 사용할 때 링크된 섹션이 링크의 맨 위에 표시되는 것이 일반적입니다. 클릭 시 페이지. 연결된 섹션 앞에 수직 공간이 필요한 시나리오의 경우 이 문제가 발생합니다.

다행히 "scroll-margin-top" 속성을 활용하여 이러한 요구를 해결할 수 있습니다. 방법은 다음과 같습니다.

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

앵커 링크를 수신하는 요소에 원하는 픽셀 값이 포함된 "scroll-margin-top" 속성을 할당합니다. 이 경우 앵커 태그는 ID가 "anchor"인 요소에 바인딩됩니다. "scroll-margin-top"을 100px로 설정하면 앵커 링크를 클릭하면 페이지 상단에서 수직 간격이 100px인 "anchor" 요소로 이동하게 됩니다.

이것은 브라우저입니다. -앵커 링크의 수직 오프셋을 제어하는 ​​호환 가능한 방법을 제공하는 지원 솔루션입니다.

위 내용은 앵커 링크 앞에 수직 공간을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!