Les Marges en CSS

Objectif

• Connaitre les propriétés de l'élément Margin

Définitions

• Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures.
• Pour chaque élément html on peut donc définir l'espacement qui le séparera des autres éléments avec margin et les espacements intérieurs dont il peut bénéficier avec padding .

Les marges externes avec margin

• Les propriétés de marge spécifient la largeur de la zone de marge d'un bloc.
• Définit la marge pour les quatre côtés de la zone de marge d'un bloc.
• La "marge externe" est la zone "margin". D'où le nom de la propriété : margin.

1. Déclaration des tailles

   • La propriété : margin spécifie la marge pour les quatre côtés à la fois.
     • Définir une largeur fixe.
     • Utiliser l'unité pourcentage: Dans ce cas le pourcentage est calculé par rapport à la taille du bloc conteneur.
     • Mettre auto qui correspond à une valeur automatique définie par le navigateur.

     Si on ne spécifie qu'une valeur dans la propriété margin, celle-ci s'applique à tous les côtés.

2. Les propriétés de margin

   • margin-top: marge extérieure en haut
   • margin-bottom: marge extérieure en bas
   • margin-left : marge extérieure à gauche
   • margin-right : marge extérieure à droite
   • Si on écrit : margin:2px 5px 2em 0;
   • revient à :
   margin-top:2px; margin-right:5px; margin-bottom:2em; margin-left:0;

Les marges internes avec padding

• Le principe reste le même qu'à la place de margin, on utilise padding.
• Le padding est une zone, appelée aussi "marge interne" ou "intervalle".
• Elle est utilisée pour définir une distance entre le contenu d'une boîte et la bordure utilisée.

1. Les propriétés de padding

   • padding-top: marge intérieure en haut
   • padding-bottom: marge intérieure en bas
   • padding-left : marge intérieure à gauche
   • padding-right : marge intérieure à droite
2. Exemple
   • Si on écrit: { padding:10px 50px 40px 20px; }
   • est équivalent à: { padding-top:10px; padding-right:50px; padding-bottom:40px; padding-left:20px; }
   • Si on met deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche.
   padding:2px 5px;
   • revient à :
   padding-top:2px; padding-bottom:2px; padding-right:5px padding-left:5px;