Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie füge ich vor einem Ankerlink vertikalen Abstand hinzu?

Susan Sarandon
Freigeben: 2024-11-05 06:50:02
Original
826 Leute haben es durchsucht

How to Add Vertical Space Before an Anchor Link?

Ankerlinks mit Pixelversatz positionieren

Bei der Verwendung von Ankerlinks kommt es häufig vor, dass der verlinkte Abschnitt ganz oben angezeigt wird die Seite beim Klicken. Dieses Problem tritt in Szenarien auf, in denen etwas vertikaler Platz vor dem verlinkten Abschnitt gewünscht wird.

Glücklicherweise kann die Eigenschaft „scroll-margin-top“ verwendet werden, um diesen Bedarf zu decken. So geht's:

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

Weisen Sie die Eigenschaft „scroll-margin-top“ mit dem gewünschten Pixelwert dem Element zu, das den Ankerlink erhält. In diesem Fall ist das Ankertag an ein Element mit der ID „Anker“ gebunden. Durch die Einstellung von „scroll-margin-top“ auf 100 Pixel wird sichergestellt, dass durch Klicken auf den Ankerlink zum „Anker“-Element mit 100 Pixel vertikalem Abstand vom oberen Rand der Seite navigiert wird.

Dies ist ein Browser -unterstützte Lösung, die eine kompatible Möglichkeit zur Steuerung des vertikalen Versatzes von Ankerverbindungen bietet.

Das obige ist der detaillierte Inhalt vonWie füge ich vor einem Ankerlink vertikalen Abstand hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!