Aide CSS : Margin et Padding¶
1. Différence entre margin et padding¶
- Margin : espace extérieur entre un élément et les autres éléments.
- Padding : espace intérieur entre le contenu et la bordure de l’élément.
2. Syntaxe longue¶
Margin¶
margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 3rem;
margin-left: 4rem;
Padding¶
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 1.5rem;
padding-left: 2rem;
3. Syntaxe courte (shorthand)¶
Règles générales¶
- 1 valeur : appliquée aux 4 côtés
- 2 valeurs : 1ère valeur = haut et bas, 2ème valeur = gauche et droite
- 3 valeurs : 1ère valeur = haut, 2ème = gauche et droite, 3ème = bas
- 4 valeurs : haut, droite, bas, gauche (dans le sens des aiguilles d’une montre)
Exemples Margin¶
margin: 1.5rem; /* 4 côtés identiques */
margin: 1rem 3rem; /* haut/bas = 10px, gauche/droite = 30px */
margin: 0.5rem 1rem 1.5rem; /* haut = 5px, gauche/droite = 15px, bas = 25px */
margin: 0.2rem 0.5rem 1rem 1.5rem;/* haut = 5px, droite = 10px, bas = 15px, gauche = 20px */
Exemples Padding¶
padding: 1rem; /* 4 côtés identiques */
padding: 0.5rem 1rem; /* haut/bas = 5px, gauche/droite = 15px */
padding: 0.5rem 1.5rem 1rem; /* haut = 5px, gauche/droite = 10px, bas = 15px */
padding: 0.5rem 1rem 1.5rem 2rem; /* haut = 5px, droite = 10px, bas = 15px, gauche = 20px */
L'ordre est important¶
Noter qu'en CSS : la dernière déclaration d'un attribut écrase la première.
Exemple :
div{
margin-top: 1rem; /*établi une marge haut*/
margin: 3rem; /*établi les marges tout le tour - et écrase la marge du haut précédente*/
}
div{
padding: 3rem; /*établi les marges tout le tour */
padding-top: 1rem; /*établi une marge haut en écrasant la valeur précente pour le haut*/
}