Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

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

Aidez la Communauté des Étudiants !