|

La propriété Margin

Cette propriété spécifie une largeur identique pour chacune des marges en l'occurrence supérieure, inférieure, droite et gauche.

Elle regroupe les différentes propriétés permettant de définir l'espace intérieur d'un élément, entre ses bords et son contenu :

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

La propriété accepte des valeurs sous forme de taille ou sous forme de de pourcentage. Il est permis d'appliquer des valeurs négatives pour des propriétés de marge, mais il peut y avoir des limites spécifiques de mise d'en oeuvre.

• Lorsqu'une seule valeur est indiquée, elle s'applique aux quatre marges.
• Lorsque deux valeurs sont spécifiées, elles s'appliquent dans l'ordre à la marge supérieure et inférieure, et aux marges de droite et de gauche.
• Lorsque deux valeurs sont spécifiées, elles s'appliquent dans l'ordre à la marge supérieure, puis aux marges de droite et de gauche et enfin à la marge inférieure.
• Lorsque quatres valeurs sont spécifiées, elles s'appliquent dans l'ordre aux marges supérieure, de droite, inférieure et de gauche.

margin
Valeur	Taille Pourcentage auto
Type	CSS 1 & 2
Compatibilité	5+ 7+ 4+ 3+ 9+
Valeur par défaut	selon l'élément
Domaine d'application	Tous les éléments
Héritage	non
Media	visuel

Exemples

Une marge de valeur fixe s'applique tout autour de l'élément.

div {margin: 4em}

Des marges de valeurs fixes s'appliquent tout autour de l'élément.

div {margin: 4px 20px 30px 5px}

Une marge sera définit automatiquement par le navigateur à l'élément.

div {margin: auto}

La marge s'appliquera en fonction des dimensions de l'élément.

div {margin: 5% 20%}

|