Maison > interface Web > tutoriel CSS > le corps du texte

Comment ajouter un espace vertical avant un lien d'ancrage ?

Susan Sarandon
Libérer: 2024-11-05 06:50:02
original
825 Les gens l'ont consulté

How to Add Vertical Space Before an Anchor Link?

Positionnement des liens d'ancrage avec décalage de pixels

Lors de l'utilisation de liens d'ancrage, il est courant que la section liée à apparaisse tout en haut de la page en cliquant. Pour les scénarios où un certain espace vertical est souhaité avant la section liée à, ce problème se pose.

Heureusement, la propriété "scroll-margin-top" peut être utilisée pour répondre à ce besoin. Voici comment procéder :

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>
Copier après la connexion

Attribuez la propriété "scroll-margin-top" avec la valeur de pixel souhaitée à l'élément recevant le lien d'ancrage. Dans ce cas, la balise d'ancrage est liée à un élément portant l'ID « ancre ». En définissant "scroll-margin-top" sur 100px, cela garantit qu'en cliquant sur le lien d'ancrage, vous accéderez à l'élément "anchor" avec un espacement vertical de 100px à partir du haut de la page.

Ceci est un navigateur -solution prise en charge, fournissant un moyen compatible de contrôler le décalage vertical des liens d'ancrage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!