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.

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.

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.

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
1. 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;