---
title: scroll-margin-top
slug: Web/CSS/scroll-margin-top
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/scroll-margin-top
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>scroll-margin-top</code></strong> définit la marge de défilement de l'élément sur le côté haut. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>

<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css">/* Valeurs de longueur */
/* Type &lt;length&gt; */
scroll-margin-top: 10px;
scroll-margin-top: 1em;

/* Valeurs globales */
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}</td>
   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.scroll-margin-top")}}</p>