Accueil    CSS    Propriété padding
 



style css padding  Style CSS padding

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété padding permet de définir l'espace entre le bord d'un élément et son contenu. Il est possible de définir ces espaces de façon globale pour les quatre côtés ou de façon spécifique pour chacun des côté en spécifiant le padding pour chacun d'eux :
   - padding-top
   - padding-left
   - padding-right
   - padding-bottom

La déclaration suivante "padding:5px 10px 15px 20px;" permet d'initialiser le padding des quatre bordures en une fois. Dans cet exemple on a en détail :
   - padding-top:5px;
   - padding-right:10px;
   - padding-bottom:15px;
   - padding-left:20px;

L'article relatif au modèle des boites permet de bien comprendre les différentes dispositions s'appliquant autour d'un élément.



Propriétés pour le style padding :




Propriété Définition Valeurs CSS
padding Détermine l'espace entre les bords de l'élément et son contenu valeur
%
inherit
CSS 1
padding-top Détermine l'espace entre le bord haut de l'élément et son contenu valeur
%
inherit
CSS 1
padding-bottom Détermine l'espace entre le bord bas de l'élément et son contenu valeur
%
inherit
CSS 1
padding-left Détermine l'espace entre le bord gauche de l'élément et son contenu valeur
%
inherit
CSS 1
padding-right Détermine l'espace entre le bord droit de l'élément et son contenu valeur
%
inherit
CSS 1


Exemple d'utilisation du style css padding :




Application de différentes valeurs de padding au sein d'un élément <div> :

<div style="border:solid 1px black; width:350px;">
   Exemple de texte inclu dans un élément <div> de taille fixe sans propriété padding.
   Le texte est collé aux bordures de l'élément.
</div>


<div style="border:solid 1px black; width:350px; padding:10px;">
   Exemple de texte inclu dans un élément <div> de taille fixe avec la propriété
   padding:10px.
   Le texte est espacé de 10 pixels des différentes bordures de l'élément.
</div>

<div style="border:solid 1px black; width:350px; padding-left:10px;
   padding-right:10px;">
   Exemple de texte inclu dans un élément <div> de taille fixe avec les propriétés
   padding-left:10px et padding-right:10px.
   Le texte est espacé de 10 pixels des bordures gauche et droite de l'élément.
</div>

<div style="border:solid 1px black; width:350px; padding-top:10px;
   padding-bottom:10px;">
   Exemple de texte inclu dans un élément <div> de taille fixe avec les propriétés
   padding-top:10px et padding-bottom:10px.
   Le texte est espacé de 10 pixels des bordures haute et basse de l'élément.
</div>

<div style="border:solid 1px black; width:350px; padding:10px 20px 30px 40px;">
   Exemple de texte inclu dans un élément <div> de taille fixe avec la propriété padding
   valorisée en une fois pour les quatre bordures avec des valeurs différentes.
</div>


Application de différentes valeurs de padding au sein d'un élément <div> :

Exemple de texte inclu dans un élément <div> de taille fixe sans propriété padding. Le texte est collé aux bordures de l'élément.

Exemple de texte inclu dans un élément <div> de taille fixe avec la propriété padding:10px. Le texte est espacé de 10 pixels des différentes bordures de l'élément.

Exemple de texte inclu dans un élément <div> de taille fixe avec les propriétés padding-left:10px et padding-right:10px. Le texte est espacé de 10 pixels des bordures gauche et droite de l'élément.

Exemple de texte inclu dans un élément <div> de taille fixe avec les propriétés padding-top:10px et padding-bottom:10px. Le texte est espacé de 10 pixels des bordures haute et basse de l'élément.

Exemple de texte inclu dans un élément <div> de taille fixe avec la propriété padding valorisée en une fois pour les quatre bordures avec des valeurs différentes.