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

<p>La propriété <strong><code>scroll-margin-left</code></strong> définit la marge de défilement de l'élément sur le côté gauche. 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-left.html")}}</div>


<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

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

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

/* Valeurs globales */
scroll-margin-left: inherit;
scroll-margin-left: initial;
scroll-margin-left: 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-left", "scroll-margin-left")}}</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-left")}}</p>