CSS Débutant .com

Les marges en CSS

Définition

Comme vous l'avez deviner, les marges permetent de définir l'espace entre les éléments HTML (haut,gauche,bas et droite)

Héritage

Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien)

Syntaxe

margin-top: espace en pixels, pourcentage ou auto; margin-left: espace en pixels, pourcentage ou auto; margin-right: espace en pixels, pourcentage ou auto; margin-bottom: espace en pixels, pourcentage ou auto;

Vous avez 3 possibilités :

• Espace en pixels (exemple 10px)
• Pourcentage (70%)
• auto (réglage automatique)

Vous pouvez aussi déclarer vos marges comme cela :
margin: 10px 10px 10px 10px;

Les valeurs définissent l'espace entre les éléments HTML dans cet ordre :

1. haut
2. droite
3. bas
4. gauche

Si ne renseignez qu'une valeur, elle sera prise par défaut pour les autres espaces entre les éléments HTML

margin: 10px;

Si vous renseignez deux ou trois valeurs, elles seront la références pour les cotés opposés.
margin: 10px 10px; /* 2 valeurs */ margin: 10px 10px 10px; /* 3 valeurs */

Vous pouvez définir des marges à zéro. Si vous ne définissez pas les marges, elles prenent 0 comme valeur par défaut.
margin: -10px;

De nombreuses différences entre navigateurs résultes de problèmes de marges définie différement entre deux navigateurs.

Pour combattre cela, il suffit de les mettres à 0; Elements like paragraphs have default margins in some browsers, to combat this set the margin to 0 (zero).
p {margin: 0;}

Attention

Il ne faut pas mettre "px" si la valeur est zéro (Voir exemple ci-dessus)

L'exemple ci-dessous défini une marge de 20px à la balise BODY
body{ margin: 20px; background: #eeeeee; font-size: small; font-family: "Tahoma", Arial, sans-serif; text-align: left; }

Après les marges, définissons les paddings >>>