OUJOOD.COM
CSS les marges extérieurs
Les propriétés CSS
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
Définition et utilisation:La propriété margin-left
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" |
Valeurs de la propriété :margin-left
| 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 |
Exemples d'utilisation
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;
}
Héritage
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.
Compatibilité des navigateurs
La propriété margin-left est supportée par tous les navigateurs modernes, y compris Internet Explorer à partir de la version 5.
Utilisation avec les autres propriétés de marge
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".
Utilisation avec les propriétés de positionnement : margin-left
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.
Conclusion
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.