documentation css padding

Version CSS : 1

• S’applique à : Tous les éléments.
• Valeur héritée : Non
• Valeur par défaut : selon l’élément

Regroupe les différentes propriétés permettant de définir l’espace intérieur d’un élément, entre ses bords et son contenu :

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

Si l’on ne précise qu’une longueur, celle-ci s’appliquera aux quatres cotés de l’élément. Il est cependant possible de définir les cotés indépendemment un indiquant plusieurs longueurs.

Attribution des marges si plusieurs mentions sont définies (depuis CSS2 uniquement et donc non reconnu par les anciens navigateurs) :

• si 2 valeurs : première mention pour le haut et le bas, seconde pour droite et gauche.
• si 3 valeurs : première mention pour le haut, seconde pour droite et gauche, troisième pour le bas.
• si 4 valeurs : les quatre mentions sont respectivement attribuées aux espaces haut, droite, bas et gauche.

Valeurs pour les mentions :

• longueur : espace défini dans une unité précise
• pourcentage : espace calculé en fonction de la longueur de l’élément

Les valeurs négatives ne sont pas permises.

Exemple de script

.padding1 {
  padding: 30px; ;
}
 
.padding2 {
  padding: 30px 50px;;
}
 
.padding3 {
  padding: 30px 50px 5px; ;
}
 
.padding4 {
  padding: 30px 50px 5px 20px;;
}