Propriété CSS margin-left

La propriété margin-left est utilisée pour définir le volume de la marge à gauche de l'élément.

Il y a quelque rares situations quand toutes les width, margin-left, border, padding, la zone de contenu et margin-right sont définies. Quand cela occure, margin-left est ignorée et et elle sera définie comme si la valeur "auto" est définie.

Valeur initiale	0
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. La marge gauche de l'élément est animable.
Version	CSS2
Syntaxe DOM	object.style.marginLeft = "20px";

Valeurs négatives sont autorisées.

Syntaxe

margin-left: length | auto | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .left { margin-left: 25px;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-left</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="left">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, dans lequel la marge à gauche de l'élément est définie comme "8em":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .left { margin-left: 8em;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-left </h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    <p class="left">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
  </body>
</html>

Essayez-vous-même!

Ici la marge gauche est spécifiée par "em", "px" et "%" pour afficher les différences:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.p1 {
      margin-left: 6em;
      }
      p.p2 {
      margin-left: 40px; 
      }
      p.p3 {
      margin-left: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété margin-left</h2>
    <p>Aucune marge spécifiée.</p>
    <p class="p1"> Marge gauche à 6em.</p>
    <p class="p2">Marge gauche à 40px.</p>
    <p class="p3">Marge gauche à 10%.</p>
    <p>No specified margin</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Définit la marge gauche. C'est la valeur initiale de cette propriété.
length	Définit la marge gauche en px, pt, cm, etc. La valeur initiale est 0.
%	Définit la marge en % de l'élément contenu.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.