Margin-Top, Margin-Right, Margin-Bottom, Margin-Left (propriétés CSS)

Ces quatres propriétés définissent respectivement la marge du haut, la marge de droite, la marge du bas et la marge de gauche de l'élément. Ces marges sont déterminées par rapport à l'élément parent. Les valeurs négatives sont autorisées mais à condition de rester dans les limites du possible (ne pas faire sortir un élément de la page par exemple).


Propriétés Margin en CSS
 

La propriété générique Margin définit en une seule fois les quatre marges :

P {Margin: 0.5cm 1cm;}
IMG {Margin: 1cm;} /* Marge de 1cm tout autour des images */

Voir aussi les propriétés Padding (marges intérieures).

Valeurs pour Margin.

AutoLa marge est déterminée par le navigateur.
Le résultat obtenu est souvent un centrage de l'élément.
[Nombre][Unité]La marge est fixée à la valeur indiquée. Reportez-vous à la page sur les unités CSS.
[Nombre]%La marge est un pourcentage de la taille de l'élément parent.
InheritMêmes valeurs que celles de l'élément parent.

Exemples.

Margin: 1cm;

Les marges, tout autour de ce cadre sont positionnées à 1cm.

Margin: 1cm 25% 1cm 25%;

Les marges du haut et du bas sont à 1cm. Les bords gauches et droits du cadre sont fixées à 25% de la largeur de l'élément parent, c'est à dire la page.
Changez la taille de la fenêtre et observez que ce ratio de 25% est bien conservé.

Margin: Auto;

La propriété Margin est définie à Auto. Sur la plupart des navigateurs, cela se traduit par un centrage du cadre.

Pour toute utilisation des informations de cette page, reportez vous au copyright