oujood.com

CSS La propriété : margin-left

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

chercher |

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.


La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web