Padding
Padding est une zone, appelée aussi "marge interne" ou "intervalle", qui correspond à la première possibilité d'entourer le "contenu" à l'aide de 4 valeurs. En réalité la zone blanche "padding" du schéma ci-dessous, est normalement de la même couleur (beige foncée dans cet exemple) que celle du "contenu".
Cette propriété qui permet de définir la distance entre le contenu d'une boîte et la bordure de ce dernier, sera par exemple utilisé pour éloigner un contenu de la bordure qui l'entoure.
La zone "padding" va permettre si besoin, de donner à la boîte concernée une position aérée par rapport aux autres éléments mitoyens mais son utilisation n'a rien d'obligatoire.
Voici notre schéma de base...
Valeurs pour PADDING
- Longueur : qui spécifie une largeur fixe.
- Pourcentage : valeur calculée par rapport à la largeur du bloc conteneur de la boîte générée. Idem pour les propriétés "padding-top"et "padding-bottom".
Ces valeurs ne peuvent pas être négatives. L'hérédité n'est pas supportée.
Règles applicables aux valeurs
Les valeurs utilisables longueur (choisir une unité) et pourcentage (calculé par rapport à la longueur de l'élément), sont indiquées dans le sens des aiguilles d'une montre, en partant du sommet de la boîte. Les valeurs négatives ne sont pas autorisées.
Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour l'espacement du haut et celui du bas, et la seconde pour l'espacement de droite et celui de gauche. Avec trois valeurs, l'espacement du haut reçoit la première valeur, les espacements gauche et droite la deuxième et l'espacement du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux espacements du haut, de droite, du bas et de gauche.
La propriété raccourcie "padding" est appliquée aux exemples suivants et sert à spécifier de manière groupée les différentes valeurs admises. Un espace toujours entre chacune d'elles.
- si pas de padding = valeur par défaut = zéro
Exemples présentés avec une fine bordure ( border: solid 2px #990000 ; ) pour visualiser les effets produits sur une boîte par différents "padding" .
.padding { border: solid 2px #990000 ; width: 350px ; text-align: justify ; } Situé dans la constellation de l'Autel, à 50 années-lumière, ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement neuf jours et demi, n'est en effet «que» 14 fois plus massif que la Terre, soit un gabarit proche de celui d'Uranus.
- si une seule valeur, elle s'applique aux quatre cotés
.padding1 {border: solid 2px #990000 ; padding:
50px ; width: 350px ; text-align: justify ; } Situé dans la
constellation de l'Autel, à 50 années-lumière, ce corps
céleste qui gravite autour de l'étoile mu-Arae en seulement neuf
jours et demi, n'est en effet «que» 14 fois plus massif que la Terre,
soit un gabarit proche de celui d'Uranus.
- si deux valeurs, la première s'applique à "top" et "bottom", et la deuxième à "right" et "left"
.padding3 { border: solid 2px #990000 ; padding:
10px 30px ; width: 350px ; text-align: justify ; } Situé dans
la constellation de l'Autel, à 50 années-lumière, ce corps
céleste qui gravite autour de l'étoile mu-Arae en seulement neuf
jours et demi, n'est en effet «que» 14 fois plus massif que la Terre,
soit un gabarit proche de celui d'Uranus.
- si trois valeurs, la première s'applique à "top", la seconde à "right" et "left" et enfin la troisième à "bottom"
.padding4 { border: solid 2px #990000 ; padding:
50px 40px 5px ; width: 350px ; text-align: justify ; } Situé
dans la constellation de l'Autel, à 50 années-lumière,
ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement
neuf jours et demi, n'est en effet «que» 14 fois plus massif que
la Terre, soit un gabarit proche de celui d'Uranus.
- si quatre valeurs, la première s'applique à "top", la seconde à "right", la troisième à "bottom" et la dernière à "left"
.padding4 { border: solid 2px #990000 ; padding: 50px 60px 5px 10px ; width: 350px ; text-align: justify ; }Situé dans la constellation de l'Autel, à 50 années-lumière, ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement neuf jours et demi, n'est en effet «que» 14 fois plus massif que la Terre, soit un gabarit proche de celui d'Uranus.
N'oubliez pas que { padding: 50px 60px 5px 10px ; } est égal à ( padding-top: 50px ; padding-right: 60px ; padding-bottom: 5px ; padding-left: 10px ; }
Remarquez comment suivant les valeurs données au "padding", le texte du "contenu" est automatiquement adapté.
Code placé dans cette page entre <HEAD> et </HEAD>
.padding1 { padding:50px ;
width: 350px ; }
.padding2 { padding:10px 30px ; width: 350px
; }
.padding3 { padding:50px 40px 5px ; width:
350px ; }
.padding4 { padding:50px 60px 5px 10px ; width:
350px ; }
.padding-top { padding-top: 3cm ; }
.padding-right { padding-right: 3cm ; }
.padding-bottom { padding-bottom: 3cm ;
}
.padding-left { padding-left: 3cm ; }
padding-top, padding-right , padding-bottom, padding-left
Toujours la bordure mini de 2px en marron, pour permettre de visualiser les effets de "padding".
Padding-top : pour définir l'espacement entre le contenu et le bord supérieur de la boîte.
.padding-top { border: solid 2px #990000 ; padding-top: 3cm ; text-align: justify ; } Situé dans la constellation de l'Autel, à 50 années-lumière, ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement neuf jours et demi, n'est en effet «que» 14 fois plus massif que la Terre, soit un gabarit proche de celui d'Uranus.
Padding-right : pour définir l'espacement entre le contenu et le bord droit de la boîte.
.padding-right { border: solid 2px #990000 ; padding-right: 3cm ; text-align: justify ; } Situé dans la constellation de l'Autel, à 50 années-lumière, ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement neuf jours et demi, n'est en effet «que» 14 fois plus massif que la Terre, soit un gabarit proche de celui d'Uranus.
Padding-bottom : pour définir l'espacement entre le contenu et le bord inférieur de la boîte.
.padding-bottom { border: solid 2px #990000 ; padding-bottom: 3cm ; text-align: justify ; } Situé dans la constellation de l'Autel, à 50 années-lumière, ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement neuf jours et demi, n'est en effet «que» 14 fois plus massif que la Terre, soit un gabarit proche de celui d'Uranus.
Padding-left : pour définir l'espacement entre le contenu et le bord gauche de la boîte.
.padding-left { border: solid 2px #990000 ; padding-left: 3cm ; text-align: justify ; }Situé dans la constellation de l'Autel, à 50 années-lumière, ce corps céleste qui gravite autour de l'étoile mu-Arae en seulement neuf jours et demi, n'est en effet «que» 14 fois plus massif que la Terre, soit un gabarit proche de celui d'Uranus.
Codes dans BODY avec appel des classes
<p class="padding1"> ..... </p>
Codes dans BODY en ligne
<p style="border: solid 2px #990000 ; padding-top: 3cm ;"> ..... </p>
