Dans le présent chapitre on va s'attaquer à la première composante du modèle de boîtes CSS (box model) : la propriété d'espacement padding. Ne vous inquiétez pas, ce chapitre sera très bref

• Introduction à la propriété CSS padding

• Les propriétés CSS de remplissage (padding)

Introduction à la propriété CSS padding

Le padding est la distance interne entre la bordure et le contenu de l'élément. Par exemple la distance séparant les bordures d'une balise div et son contenu (tableau, paragraphe etc.). L’illustration suivante met en évidence la différence entre le padding (marge intérieure) et le margin (marge extérieure) :

Dans cet exemple on a un div dont le fond est de couleur jaune, on lui a appliqué les marges intérieures suivantes :

div {
padding-top: 50px;
padding-left: 60px;
padding-bottom: 40px;
padding-right: 80; 
}
Ou tout simplement :
div {
padding: 50px 80px 40px 60px;
}

Ceci a pour effet d'éloigner les bordures du contenu intérieur (le tableau) du div par les valeurs mentionnées. Remarquez que les marges (la propriété CSS margin) appliquées à notre div concernent la zone extérieure qui débute à partir des bordures, c'est-ce qui fait la différence entre le margin et le padding. Je ne vais pas m'attarder là-dessus c'est pourquoi je vais parler brièvement de ces quatre propriétés.

Les propriétés CSS de remplissage (padding)

Vous avez le choix entre les quatre propriétés CSS détaillées ou bien la propriété CSS générique padding. Vous n'êtes pas obligé de spécifier tous les espacements internes, mais uniquement ceux qui vous intéressent, les autres vont prendre la valeur initiale qui correspond à 0.

padding-top (espacement supérieure)

Elle permet de préciser l'espace vide qui s'étend depuis la limite supérieure d'un élément jusqu'à sa bordure supérieure.

padding-bottom (espacement inférieure)

Elle permet de préciser l'espace vide qui s'étend depuis la limite inférieure d'un élément jusqu'à sa bordure inférieure.

padding-left (espacement gauche)

Elle permet de préciser l'espace vide qui s'étend depuis le bord gauche d'un élément jusqu'à sa bordure gauche.

padding-right (espacement droit)

Elle a pour effet de préciser l'espace entre la limite droite d'un élément et sa bordure droite.

La propriété générique padding

La méga-propriété padding permet de spécifier à la fois les quatre notations précitées. Elle peut recevoir une seule valeur, deux valeurs, trois valeurs ou même quatre valeurs :

• quatre valeurs : elles seront reprises par le navigateur dans le sens des aiguilles en partant du haut (haut, droite, bas, gauche). Ceci dit que la première correspondra à l'espacement supérieur, la deuxième à l'espacement droit et ainsi de suite ;
• trois valeurs : la première correspondra à l'espacement pour le haut, la deuxième au remplissage pour la droite et la gauche, enfin la troisième va préciser la marge interne pour le bas ;
• deux valeurs : la première correspondra aux deux espacements haut et bas, la deuxième valeur va représenter les deux autres marges gauche et droite ;
• une seule valeur : elle va correspondre aux quatre remplissages.

Remarques

• pour toutes les propriétés génériques. Les valeurs passées sont séparées par des espaces ;
• Pour que l'effet padding soit visible pensez à ajouter une couleur de fond ou des bordures à l'élément ;
• le padding ressemble énormément au margin dans le cas où ce dernier est appliqué à un élément imbriqué dans un bloc (div, p, etc.). Dans cette situation le margin appliqué à l'enfant va représenter en quelques sortes un padding pour l'élément parent ;
• lorsque vous ajouter du remplissage dans une boîte, la taille de son rectangle va augmenter, mais pas la taille du bloc du contenu ;
• les valeurs d'espacement ne doivent en aucun cas être négatives ;
• les valeurs relatives (%) sont calculées en fonction de la dimension du bloc parent immédiat ;
• les espacements ont tous pour valeur initiale "0".

Dans le prochain chapitre, on va régler le compte d'un autre élément du truc qui s'appelle le modèle des boîtes CSS. Une notion qui commence à nous taper sur les nerfs Chapitre suivant : la propriété CSS border (bordure).