margin-left

La propriété margin-left d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche. On peut avoir une marge gauche négative.

Area on which CSS margin-left apply

Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.

Dans certains cas où les dimensions sont sur-contraintes (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.

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
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Animableoui, comme une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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: unset;

Valeurs

<length>
Une valeur fixe, du type <length> : elle peut être exprimée en pixels (px) ou en fonction de la taille du texte (em) ou être relative à la taille de la zone d'affichage (viewport) (vh).
<percentage>
Une valeur exprimée en pourcentage (type <percentage> relative à la largeur du bloc englobant.
auto
Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également auto. 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 horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec auto. Boîtes flexibles.

Syntaxe formelle

<length> | <percentage> | auto

Exemples

CSS

.exemple {
  margin-left: 50%;
}

HTML

<p>Un grand rosier se trouvait à l’entrée du jardin ;
   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 :
  « Fais donc attention, Cinq, et ne m’éclabousse pas
  ainsi avec ta peinture. »
</p>
<p>
  « Ce n’est pas de ma faute, » dit Cinq d’un ton
  bourru, « c’est Sept qui m’a poussé le coude. »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Basic Box Model
La définition de 'margin-left' dans cette spécification.
Version de travail Pas de modification significative depuis CSS 2.1.
CSS Transitions
La définition de 'margin-left' dans cette spécification.
Version de travail margin-left peut désormais être animée.
CSS Flexible Box Layout Module
La définition de 'margin-left' dans cette spécification.
Candidat au statut de recommandation Le comportement de margin-left sur les éléments flexibles est défini.
CSS Level 2 (Revision 1)
La définition de 'margin-left' dans cette spécification.
Recommendation L'effet sur les éléments en ligne (inline) est retiré.
CSS Level 1
La définition de 'margin-left' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) 3.0 3.5 1.0 (85)
auto 1.0 1.0 (1.7 ou moins) 6.0 (strict mode) 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) 6.0 6.0 1.0

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, the prisoner
 Dernière mise à jour par : SphinxKnight,