Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> padding (remplissage intérieure)

padding (remplissage intérieure)

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

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) :

la propriété CSS padding (remplissage ou espace)

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 :

Remarques

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).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau