Explication des propriétés CSS padding et margin
En CSS, les propriétés padding et margin permettent de définir des espaces respectivement à l’intérieur (padding) ou à l’extérieur (margin) d’un élément. Leur syntaxe est identique.
1. Syntaxe individuelle : padding-top, padding-right, padding-bottom, padding-left
Ces propriétés permettent de définir séparément le padding pour chaque côté d’un élément :
padding-top: espace au-dessus du contenu.padding-right: espace à droite du contenu.padding-bottom: espace en dessous du contenu.padding-left: espace à gauche du contenu.
Exemple :
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
Cela crée un padding spécifique pour chaque côté.
2. Syntaxe raccourcie avec 2 valeurs : padding: 10px 20px;
Quand deux valeurs sont utilisées :
- La première valeur s’applique à
topetbottom. - La deuxième valeur s’applique à
rightetleft.
Exemple :
padding: 10px 20px;
topetbottom: 10px.rightetleft: 20px.
3. Syntaxe raccourcie avec 3 valeurs : padding: 5px 50px 10px;
Quand trois valeurs sont utilisées :
- La première valeur s’applique à
top. - La deuxième valeur s’applique à
rightetleft. - La troisième valeur s’applique à
bottom.
Exemple :
padding: 5px 50px 10px;
top: 5px.rightetleft: 50px.bottom: 10px.
4. Syntaxe raccourcie avec 4 valeurs : padding: 5px 50px 10px 100px;
Quand quatre valeurs sont utilisées :
- La première valeur s’applique à
top. - La deuxième valeur s’applique à
right. - La troisième valeur s’applique à
bottom. - La quatrième valeur s’applique à
left.
Exemple :
padding: 5px 50px 10px 100px;
top: 5px.right: 50px.bottom: 10px.left: 100px.
Application identique pour margin
La même logique s’applique à la propriété margin pour définir les espaces externes :
margin-top,margin-right,margin-bottom,margin-left.- Syntaxe raccourcie :
margin: 10px 20px;→ Haut/bas : 10px, droite/gauche : 20px.margin: 5px 50px 10px;→ Haut : 5px, droite/gauche : 50px, bas : 10px.margin: 5px 50px 10px 100px;→ Haut : 5px, droite : 50px, bas : 10px, gauche : 100px.
Résumé :
- 2 valeurs : haut/bas, droite/gauche.
- 3 valeurs : haut, droite/gauche, bas.
- 4 valeurs : haut, droite, bas, gauche.
- Fonctionne de manière identique pour
paddingetmargin, ainsi que pour d’autres propriétés qui acceptent des valeurs multiples (border-width,border-radius…)
Mémo 4 Valeurs
margin : top right bottom left;
Exercice
Réduire les déclarations de padding avec des valeurs multiples
Objectif de l’exercice :
L’objectif est d’apprendre à simplifier des déclarations CSS en utilisant des raccourcis de valeurs multiples pour la propriété padding. Vous partirez de déclarations individuelles (padding-top, padding-right, etc.) et les réécrirez en une seule déclaration compacte. Cet exercice renforce la compréhension des différentes syntaxes possibles (2, 3, ou 4 valeurs).
Étape 1 : Code de départ
Voici un exemple avec quatre classes (.box1, .box2, .box3, .box4) utilisant des déclarations individuelles pour définir les paddings.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice : Simplifier les paddings</title>
<style>
/* Classe 1 : Déclarations individuelles */
.box1 {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
/* Classe 2 : Déclarations individuelles */
.box2 {
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 50px;
}
/* Classe 3 : Déclarations individuelles */
.box3 {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}
/* Classe 4 : Déclarations individuelles */
.box4 {
padding-top: 15px;
padding-right: 25px;
padding-bottom: 5px;
padding-left: 25px;
}
</style>
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
</body>
</html>
Étape 2 : Réécrire les classes en utilisant des raccourcis
Votre tâche consiste à réécrire les déclarations pour chaque classe en utilisant une seule ligne avec des valeurs multiples pour padding.
Rappel sur les raccourcis :
- 2 valeurs :
padding: top/bottom right/left; - 3 valeurs :
padding: top right/left bottom; - 4 valeurs :
padding: top right bottom left;
Solution attendue :
Voici les classes après simplification :
Étape 3 : Tester et observer le rendu
- Ouvrez le fichier dans un navigateur et inspectez chaque élément.
- Vérifiez que le rendu des paddings est identique avant et après la modification.
Points pédagogiques :
- Comprendre comment les valeurs multiples simplifient le code CSS tout en conservant les mêmes styles.
- Reconnaître les schémas communs pour choisir le bon format (2, 3 ou 4 valeurs).
- Réduire le nombre de lignes dans les feuilles de style pour améliorer leur lisibilité et leur maintenance.