Propriété CSS margin-left
La propriété margin-left définit la largeur de la marge gauche.
Lorsque la somme de width, margin-left, border, padding, de la zone de contenu et de margin-right dépasse la largeur du conteneur, les marges deviennent auto.
La propriété margin-left est définie par le mot-clé <auto>, <percentage> ou une <length>. Sa valeur peut être négative, positive ou nulle.
INFO
Les valeurs négatives sont autorisées.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::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"; |
Syntaxe
Syntaxe de la propriété CSS margin-left
css
margin-left: auto | <length> | <percentage> | initial | inherit;Exemple de la propriété margin-left définie avec "px" :
Exemple de la propriété CSS margin-left avec une valeur en px
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 25px;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Résultat
Exemple de la propriété margin-left définie avec "em" :
Exemple de la propriété CSS margin-left avec une valeur en em
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.left {
margin-left: 8em;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemple de la propriété margin-left définie avec "px", "em" et "%" :
Exemple de la propriété CSS margin-left avec des valeurs en em, px et %
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.p1 {
margin-left: 6em;
}
p.p2 {
margin-left: 40px;
}
p.p3 {
margin-left: 10%;
}
</style>
</head>
<body>
<h2>Margin-left property example</h2>
<p>No specified margin.</p>
<p class="p1"> Left margin is set to 6em.</p>
<p class="p2">Left margin is set to 40px.</p>
<p class="p3">Left margin is set to 10%.</p>
<p>No specified margin</p>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | Définit la marge gauche. C'est la valeur par défaut de cette propriété. | Tester » |
| length | Définit une marge gauche en px, pt, cm, etc. La valeur par défaut est 0. | Tester » |
| % | Définit la marge gauche en % de l'élément conteneur. | Tester » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que spécifie la propriété 'margin-left' en CSS ?