margin-left

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propriété CSS margin-left d'un élément définit l'espace horizontal à gauche qui formera la zone de marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.

Exemple interactif

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgba(229, 232, 252, 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgba(255, 244, 219, 0.6);
}

Les marges verticales de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.

Dans certains cas où la largeur est sur-contrainte (autrement dit quand width, margin-left, border, padding, la taille de la zone de contenu et margin-right sont toutes définies), margin-left est ignorée. La valeur calculée sera la même que si auto avait été utilisée.

Syntaxe

css
/* Valeurs de longueur */
/* Type <length>       */
margin-left: 10px; /* Une longueur absolue */
margin-left: 1em; /* Une longueur absolue relative à la taille du texte */
margin-left: 5%; /* Une marge dont la taille est relative à la largeur
                       du bloc englobant */

/* Valeur avec un mot-clé */
margin-left: auto;

/* Valeurs globales */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>). La valeur peut être positive, nulle ou négative.

Valeurs

<length>

La taille de la marge, exprimée comme une valeur fixe.

<percentage>

La taille de la marge exprimée avec un pourcentage relatif à la dimension du bloc englobant sur l'axe en ligne (qui correspond à la largeur pour une langue écrite horizontalement, voir writing-mode).

auto

Un mot-clé qui indique que la marge gauche s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé. Si margin-left et margin-right valent toutes les deux auto, m'espace calculé sera réparti de façon équitable. Le tableau suivant précise les différents cas :

Valeur de display Valeur de float Valeur de position Valeur calculée pour auto Commentaires
inline, inline-block, inline-table N'importe laquelle static ou relative 0 Disposition en ligne
block, inline, inline-block, block, table, inline-table, list-item, table-caption N'importe laquelle static ou relative 0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent. Disposition en bloc
block, inline, inline-block, block, table, inline-table, list-item, table-caption left ou right static ou relative 0 Disposition en bloc avec les éléments flottants
N'importe quelle table-*, sauf table-caption N'importe laquelle N'importe laquelle 0 Les éléments table-* n'ont pas de marge, il faut utiliser border-spacing à la place.
N'importe laquelle, sauf flex, inline-flex, ou table-* N'importe laquelle fixed ou absolute 0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée. Positionnement absolu.
flex, inline-flex N'importe laquelle N'importe laquelle 0, sauf s'il reste de l'espace libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec auto. Boîtes flexibles.

Définition formelle

Valeur initiale0
Applicabilitétous les éléments exceptés ceux dont les types display pour les tableaux ne sont pas table-caption, table et inline-table. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Valeur calculéele pourcentage tel que spécifié ou une longueur absolue
Type d'animationune longueur

Syntaxe formelle

margin-left = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Exemples

Les valeurs en pourcentage pour margin-left sont relatives à la taille en ligne du conteneur.

CSS

css
.exemple {
  margin-left: 50%;
}

HTML

html
<p>
  Un grand rosier se trouvait à l'entrée du jardin&nbsp;; les roses qu'il
  portait étaient blanches, mais trois jardiniers étaient en train de les
  peindre en rouge.
</p>
<p class="exemple">
  Alice s'avança pour les regarder, et, au moment où elle approchait, elle en
  entendit un qui disait&nbsp;: «&nbsp;Fais donc attention, Cinq, et ne
  m'éclabousse pas ainsi avec ta peinture.&nbsp;»
</p>
<p>
  «&nbsp;Ce n'est pas de ma faute,&nbsp;» dit Cinq d'un ton bourru, «&nbsp;c'est
  Sept qui m'a poussé le coude.&nbsp;»
</p>

Résultat

Spécifications

Specification
CSS Box Model Module Level 3
# margin-physical

Compatibilité des navigateurs

Voir aussi