Définit une variable
La propriété de feuille de style css margin-left css permet de gérer la marge extérieure gauche d'un élément HTML ou XHTML
La propriété de feuille de style css margin-left css permet de gérer la marge extérieure gauche d'un élément HTML ou XHTML
La propriété margin-left définie la marge extérieure gauche d'un élément HTML.
Note: Les valeurs négatives sont autorisées.
Exemple : Copier le code
p
{
margin-left:5px;
}
| Valeurs par défaut | 0 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.marginLeft="10px" |
| Valeur | Description |
|---|---|
| auto | l'explorateur calcule la marge automatiquement |
| nombre | définie la marge en px ou cm |
| % | un pourcentage de la largeur de lélément parent |
| inherit | Indique que le paramètre de la propriété doit être héritée de l'élément parent. Internet Explorer (IE8 y compris) ne supporte pas cette valeur |
La propriété CSS margin-left permet de définir la marge gauche d'un élément HTML. Cette marge définit l'espace entre l'élément et le bord gauche de son conteneur. La propriété peut prendre des valeurs en pixels, en pourcentage ou utiliser les valeurs de l'échelle d'unités relatives (rem ou em).
Pour définir une marge gauche de 20 pixels pour un élément ayant l'identifiant "maDiv", on utilisera le code suivant :
Exemple : Copier le code
#maDiv {
margin-left: 20px;
}
Pour définir une marge gauche de 5% pour un élément ayant la classe "maClasse", on utilisera le code suivant :
Exemple : Copier le code
.maClasse {
margin-left: 5%;
}
Pour définir une marge gauche de 1rem pour un élément ayant la classe "maClasse", on utilisera le code suivant :
Exemple : Copier le code
.maClasse {
margin-left: 1rem;
}
La propriété margin-left n'est pas héritée par les éléments enfants. Cela signifie que si vous définissez une marge gauche pour un élément parent, cette marge ne sera pas appliquée automatiquement aux éléments enfants.
La propriété margin-left est supportée par tous les navigateurs modernes, y compris Internet Explorer à partir de la version 5.
Il est souvent nécessaire de définir les marges pour les quatre côtés d'un élément en même temps. Pour cela, il existe la propriété margin qui permet de définir les marges pour tous les côtés d'un élément en une seule ligne de code. Par exemple :
Exemple : Copier le code
#maDiv {
margin: 20px;
}
Cette instruction définit une marge de 20 pixels pour tous les côtés de l'élément ayant l'identifiant "maDiv". Il est également possible de définir les marges pour chaque côté séparément en utilisant la syntaxe suivante :
Exemple : Copier le code
#maDiv {
margin: 20px 40px 30px 10px;
}
Cette instruction définit une marge de 20 pixels en haut, 40 pixels à droite, 30 pixels en bas et 10 pixels à gauche pour l'élément ayant l'identifiant "maDiv".
La propriété margin-left peut également être utilisée en combinaison avec les propriétés de positionnement CSS telles que position, left et right pour créer des effets de disposition avancés. Par exemple, en utilisant la propriété position: absolute et left: 0, on peut positionner un élément en haut à gauche de son conteneur, tout en définissant une marge gauche pour cet élément avec margin-left.
La propriété CSS margin-left est un outil puissant pour la mise en page des sites web, permettant de définir l'espacement entre un élément et le bord gauche de son conteneur. Elle peut être utilisée en combinaison avec d'autres propriétés CSS pour créer des effets de disposition avancés.