MARGIN pour définir les marges
"margin-top", "margin-right", "margin-bottom", "margin-left", sont les propriétés qui permettent dans une boîte CSS, de définir séparément chaque "bord" (nom donné aux quatre cotés du rectangle d'une boîte).
MARGIN... top ... right... bottom... left
margin-top = marge supérieure
margin-right = marge de droite
margin-bottom = marge inférieure
margin-left = marge de gauche
Règle fondamentale
{ margin: 10px 10% 5px 12px ; }
est identique à :
{margin-top: 10px ; }
{margin-right: 10% ; }
{margin-bottom: 5px ; }
{margin-left: 12px ; }
Code placé dans HEAD de cette page
.marginT { border: solid blue 1px ; margin-top : 2.5cm ; }
.marginT1 { border: solid blue 1px ; margin-top : 0.5cm ;; }
.marginR { border: solid blue 1px ; margin-right : 3cm ; }
.marginB { border: solid blue 1px ; margin-bottom : 2.5cm ; }
.marginB1 { border: solid blue 1px ; margin-bottom : 0.5cm ; }
.marginL { border: solid blue 1px ; margin-left : 2cm ; }
h2 { border: solid blue 1px ; margin-top : 60px ; margin-right: 24% ; margin-left: 24% ; }
.borddroit { margin-right:120px ; }
.bordgauche { margin-left:50px ; }
Exemples avec des barres de séparation comme repères, qui permettent surtout avec les valeurs données à "top" et "bottom" de mieux comprendre et analyser le rôle des propriétés MARGIN. Il arrive souvent que le mauvais positionnement de certains éléments dans une page soit en relation directe avec les valeurs données aux "marges"
.marginT { border: solid blue 1px ; margin-top : 2.5cm ; } = Le
sommet de ce texte va se placer à 2.5cm de la bordure du contenu placé
immédiatement avant (barre de séparation). Comparez avec l'exemple
suivant, dont la valeur est passée à 0,5cm.
.marginT1 { border: solid blue 1px ; margin-top : 0.5cm ; } = Le sommet de ce texte va se placer à 0.5cm de la bordure supérieure du contenu placé immédiatement avant (barre de séparation).
.marginR { border: solid blue 1px ; margin-right : 3cm ; } La fin de la ligne de ce texte va se placer à 3cm de la bordure droite de la fenêtre. "Pour le visualiser correctement j'ajoute ce morceau de texte"
.marginB { border: solid blue 1px ; margin-bottom : 2.5cm ; } Le bas de ce texte va se placer à 2.5cm de la bordure du contenu placé immédiatement après (barre de séparation). Comparez avec l'exemple suivant, dont la valeur est passée à 0,5cm, et vous pouvez vérifier qu'il s'est créé un espace identique pour "top" en dessus et "bottom" en dessous, vu que la valeur de 2.5cm est la même.
.marginB1 { border: solid blue 1px ; margin-bottom : 0.5cm ; } Le texte va se placer à 2.5cm de la bordure inférieure du contenu de ce paragraphe (barre de séparation). "Pour le visualiser correctement j'ajoute ce morceau de texte".
.marginL { border: solid blue 1px ; margin-left : 2cm ; } Le début du texte va se placer à 2cm de la bordure gauche de la fenêtre. "Pour le visualiser correctement j'ajoute ce morceau de texte".
autre exemple
h2 { border: solid blue 1px ; margin-top : 60px; margin-right: 24% ; margin-left: 24%; } L'hiver qui sévit dans toute l'Europe est très rude. Ici bous obtenez 24% de toute la largeur du document.
Dernier exemple de cette page : positionnement
Images du haut :
.right { margin-right: 120px ; } = qui définit la
marge droite de l'image (parachute) par rapport à la bordure gauche de
l'image qui suit (étendard pirate). <img src="144.gif" width="100"
height="100" class="borddroit">
Images du bas : .left
{ margin-left: 50px ; } = ici c'est différent, et c'est la marge
gauche de l'image (parachute) par rapport à la bordure gauche d'un élément
qui précède et en l'occurrence la bordure gauche de la fenêtre.
L'image qui suit (étendard pirate) n'est donc pas concernée. <p
class="bordgauche"><img src="144.gif" width="100"
height="100">
