L1 Info : Informatique et Document, CSS
 
◃  Ch. 3 La notion de boite  ▹
 

Propriétés de margin

  • margin-top : <length-percentage>
  • margin-right : <length-percentage>
  • margin-bottom : <length-percentage>
  • margin-left : <length-percentage>
  • margin : <length-percentage> | <length-percentage> <length-percentage> | <length-percentage> <length-percentage> <length-percentage> | <length-percentage> <length-percentage> <length-percentage> <length-percentage>
  • La propriété margin permet de configurer simultanément les 4 cotés :
    • de façon identique à l'aide d'une seule valeur,
    • de façon différenciée à l'aide de 2 à 4 valeurs.
  • Règles d'attributions des valeurs de margin :
    • une seule valeur : la même marge s'applique sur les quatre cotés ;
    • deux valeurs : la première s'applique en haut et en bas (margin-top + margin-bottom), la seconde à droite et à gauche (margin-right + margin-left) ;
    • trois valeurs : la première s'applique en haut (margin-top), la deuxième à droite et à gauche (margin-right + margin-left), la troisième en bas (margin-bottom) ;
    • quatre valeurs : les valeurs suivent l'ordre des aiguilles d'une montre : margin-top, margin-right, margin-bottom, margin-left.
  • Exemple :
    div { margin : 10px 5Opt 5%; }
    /* marge de 10 pixels en haut,
    5O points à gauche et à droite
    et 5% en bas. */